Как показывать предварительный загрузчик страниц только один раз при вводе через доменное имя?

Итак, у меня есть предварительный загрузчик страницы jQuery на главной странице, например:

<script type="text/javascript">
    $(window).load(function() {
        $("#preloader").delay(700).fadeOut("slow");
    })

<div id="preloader" class="preloader"></div>

Это показывает 4 раза:

  • Когда я вхожу на сайт через доменное имя;
  • Когда я обновляю главную страницу по F5;
  • Когда я нажимаю на логотип (я должен перейти на главную страницу, когда я нажал на нее);
  • Когда я нажимаю пункт меню "Главная". Но я хочу показать это только первые два раза. Итак, первая идея, которая пришла мне на ум, - это удалить div класс, чтобы не показывать изображение предварительного натяжения по всей странице, когда я нажимаю логотип или пункт меню JS. И использовали это:

document.getElementById( "preloader" ). className = 'test';

Но потом... Я понял, что, щелкнув пункт меню, чтобы снова загрузить главную страницу, я создаю новую копию документа, поэтому мой предварительный загрузчик снова имеет свой класс и появился. Итак, я решил использовать AJAX и не перезагружать целую страницу, нажав пункт меню или логотип. Теперь я использую это:

     <script type="text/javascript">
        $(document).ready(function(){
             $("#blog, #logo").click(function(){
                 $("#container").load("/blog");
                 document.getElementById("preloader").className = 'test';
             });
        });
    </script>

Итак, когда я нажимаю логотип или пункт меню, я загружаю свою категорию под названием "блог" в контейнер. И мой боковой бар выглядит так:

...        
<a href="javascript:;" id="logo"><i class="logo"></i></a>
...
<li class="m_blog"><a id="blog" href="javascript:;"><i class="icon"></i>Blog</a></li>
...

Итак, это работает! Preloader появляется только при открытии сайта через доменное имя. Но появляется одна проблема. Когда я открываю категорию "видео", у меня есть адрес: mysite.com/video/

И когда я вернулся на главную страницу через логотип или меню, у меня есть тот же адрес! Поскольку загрузка контента без повторной загрузки всей страницы и адреса не изменяется. Как я могу это исправить? Помоги мне, пожалуйста! Я просто хочу показать свой preloader только один раз: когда я пришел через доменное имя или обновил главную страницу по F5. У меня уже головокружение, потому что я знаю только HTML и CSS, но сегодня начинаю изучать AJAX и jQuery. Помогите мне в этом вопросе.

+6
источник поделиться
2 ответа

Итак, я решил проблему самостоятельно. Но, во всяком случае, благодаря @prabeen-giri, которые помогли мне правильно подумать. Во-первых, мне нужно объяснить механизм предзагрузчиков. Просто посмотрите на CSS:

position: fixed;
display: block;
top: 0;    /* making preloader cover all screen */
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position:center; center;
background-size: auto auto;
background-image: url(../images/preload.png); /* your picture should be here */
background-color:#000; 
z-index:99; /* must be the highest number of all others to cover them all */

Итак, ваш preloader просто изображение или что-то еще, которое охватывает все окна и плавно исчезает (по jQuery), когда загружается весь контент.

<div id="preloader" class="preloader"></div>

И вот script:

<script type="text/javascript">  
     $(window).load(function() {
          $("#preloader").delay(700).fadeOut("slow");}); 
</script>

Чтобы разрешить мою проблему и показать preloader только один раз при входе на сайт через доменное имя, нам нужно использовать файлы cookie. Есть 2 вспомогательные функции cookie (от Quirksmode):

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

Итак, нам нужно ввести наш собственный файл cookie, чтобы создать условия для запуска script. Первоначально наш созданный файл cookie равен null, и это равенство будет условием запуска script. После этого мы установили cookie какое-то значение, чтобы не запускать jQuery снова. Здесь код:

<script type="text/javascript">  
    $(window).load(function() {
        if (readCookie('referer') == null){
            $("#preloader").delay(700).fadeOut("slow");}
        createCookie('referer',1,0);
     }); 
</script>

Но как удалить наш предварительный рисунок и фон после обновления страницы? Потому что мы просто отключили jQuery fadeOut proccess нашими условиями. Картинка и черный фон сохраняют наше окно и не исчезают...

Создайте новое условие и поместите его в

<script>
    if (readCookie('referer') == null) {
        document.write("<style>.preloader {background-image: url(../images/preload.png); background-color:#000; z-index:99;}</style>");
    }
</script>

Под этим мы устанавливаем наш образ, z-индекс и фон в класс preloader. Наш файл cookie равен null, только когда пользователь вводит сайт через доменное имя ИЛИ очистил свой файл cookie и обновил страницу (что кажется маловероятным). И если cookie равен 1, как мы установили выше, наш предварительный загрузчик появится, но без картинки и фона, и наш jQuery fadeOut тоже не запустится! Итак, моя проблема решена так, как я хотел, preloader появится только один раз. Еще раз спасибо @prabeen-giri!

+2
источник

Изменить: Извините, мне пришлось отредактировать все это

Вот что, вы отправляете HTTP-запрос на сервер на каждое условие, которое по сути означает, что вы заявляете, что перезагружаете DOM в начальном состоянии, после чего вы работаете с помощью Javascript.

Использование метода GET было бы намного проще, но, как вы сказали, вы просто учитесь. Вместо этого вы можете использовать файлы cookie,

Вот вспомогательные функции cookie

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
} 

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

Всякий раз, когда вы нажимаете вызов дома/логотипа

setCookie('referer','home',7), setCookie('referer','logo',7); 

Теперь

 $(window).load(function() {
    if (getCookie('referer') != 'home' || getCookie('referer') != 'logo'){ 
     $("#preloader").delay(700).fadeOut("slow");
    } 

    setCookie('referer',null,7); 
 }); 

Я думаю, должен работать.

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос