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

Question

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

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

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

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

1. Когда я захожу на сайт через доменное имя;
2. Когда я обновляю главную страницу F5;
3. Когда я нажимаю на логотип (я должен перейти на главную страницу, когда я нажал на это);
4. При нажатии на пункт меню "Домой". Но я хочу показать это только в первые два раза. Итак, первая мысль, которая пришла мне в голову, это удалить div класс, чтобы не показывать изображение preloader по всей странице, когда я нажимаю логотип или пункт меню 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>
...

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

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

Answer 1

Итак, я решил проблему самостоятельно. Но, в любом случае, спасибо @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 type="text/javascript">  
     $(window).load(function() {
          $("#preloader").delay(700).fadeOut("slow");}); 
</script>

Чтобы решить мою проблему и показать preloader только один раз при входе на сайт через доменное имя, нам нужно использовать куки. Есть 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, чтобы создать условия для запуска сценария. Первоначально наш созданный файл cookie равен нулю, и это равенство будет условием запуска скрипта. После этого мы устанавливаем для 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 в соответствии с нашими условиями. Картинка и черный фон продолжают закрывать наше окно и не исчезают...

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

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

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

Answer 2

Изменить: Извините, я должен был отредактировать все это

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

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

Вот функции помощника 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); 
 }); 

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