Как показать эффект анимации jQuery до того, как страница полностью загружена?

У меня есть образец страницы с демо Lorem ipsum. Появляется кнопка «ПОКАЗАТЬ ПОГРУЗЧИК». Когда я нажимаю на него. Он показывает эффект загрузки страницы. Прямая ссылка: http://creativeartbd.com/demo/page-load/index.html Как показать эффект анимации jQuery до того, как страница полностью загружена?

Теперь я хочу показать эффект загрузки этой страницы до того, как содержимое страницы будет полностью загружено. Является ли это возможным ? Если да, то как я могу это сделать?

Я использовал этот код, чтобы нажать на кнопку после того, как страница загрузки, но это не работает:

$(document).ready(function() { 
    $('.pageload-link').click(); 
});

Вот полный код:

<!DOCTYPE html> 
<html lang="en"> 
<head>  
    <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 
    <link rel="stylesheet" type="text/css" href="css/demo.css" /> 
    <link rel="stylesheet" type="text/css" href="css/component.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="js/snap.svg-min.js"></script> 
    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div id="pagewrap" class="pagewrap">   
     <div class="show" id="page-1"> 
      <!-- Top Navigation -->   
      <section class="columns clearfix"> 
       <div class="column">       
        <p><a class="pageload-link">Show Page Loader</a></p> 
       </div> 
      </section>    
     </div><!-- /container --> 

     <!-- The new page dummy; this would be dynamically loaded content --> 
     <div class="container" id="page-2">    
      <section> 
       <h2>This is an example for a new page.</h2> 
       <p><a class="pageload-link" href="#page-1">Go back</a></p> 
      </section> 
     </div><!-- /container --> 

     <div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z"> 
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none"> 
       <path d="M30,30 50,30 50,30 30,30 Z"/> 
      </svg>   

     </div><!-- /pageload-overlay --> 


    <p style="margin:0 150px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rerum ipsum sint consectetur quos vitae veritatis magnam ipsa quas maiores natus quibusdam inventore reiciendis, alias quae eaque! Quod, voluptates, iste.</p><br/> 

    <p style="margin:0 150px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rerum ipsum sint consectetur quos vitae veritatis magnam ipsa quas maiores natus quibusdam inventore reiciendis, alias quae eaque! Quod, voluptates, iste.</p><br/> 

    <p style="margin:0 150px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rerum ipsum sint consectetur quos vitae veritatis magnam ipsa quas maiores natus quibusdam inventore reiciendis, alias quae eaque! Quod, voluptates, iste.</p><br/>   


    </div><!-- /pagewrap --> 
    <script src="js/classie.js"></script> 
    <script src="js/svgLoader.js"></script> 
    <script> 
     (function() { 
      var pageWrap = document.getElementById('pagewrap'), 
       pages = [].slice.call(pageWrap.querySelectorAll('div.container')), 
       currentPage = 0, 
       triggerLoading = [].slice.call(pageWrap.querySelectorAll('a.pageload-link')), 
       loader = new SVGLoader(document.getElementById('loader'), { speedIn : 100 }); 

      function init() { 
       triggerLoading.forEach(function(trigger) { 
        trigger.addEventListener('click', function(ev) { 
         ev.preventDefault(); 
         loader.show(); 
         // after some time hide loader 
         setTimeout(function() { 
          loader.hide(); 

          classie.removeClass(pages[ currentPage ], 'show'); 
          // update.. 
          currentPage = currentPage ? 0 : 1; 
          classie.addClass(pages[ currentPage ], 'show'); 

         }, 2000); 
        }); 
       });  
      } 

      init(); 
     })(); 


     $(document).ready(function() { 
      $('.pageload-link').click(); 
     }); 

    </script> 
</body>

источник

2016-02-01 shibbir ahmed

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

Создайте всю разметку страницы, однако убедитесь, что нагрузка загрузки выше всего, например, с помощью z-индекса.

<div class="actual-page"></div> 

<div class="load-overlay"></div>

Убедитесь, что все «показанные» стили применяются к вашему загрузчику. По умолчанию он должен быть видимым, так как вы хотите запустить страницу.

.load-overlay { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
}

Тогда вы можете разместить любые анимации или GIF, чтобы показать, что загрузка происходит и внутри onready обработчика вы должны скрывать загрузчик, так что, когда завершения загрузки страницы.

$(document).ready(function() { 
    $('.load-overlay').hide(); 
});

источник

2016-02-01 13:45:44 GMchris

благодарит за ваш ответ. Вы проверили мою прямую ссылку? –

Да. Я вижу, что вы используете SVG для фактической анимации, но ответ не сильно меняется. Просто вместо того, чтобы скрывать элемент, вы его отредактируете. Однако это всегда происходит в '$ (document) .ready()'. Вам просто нужно отредактировать его, чтобы по умолчанию отображался «развернутый» svg. – GMchris

Привет, я не могу его реализовать :( –

Как показать эффект анимации jQuery до того, как страница полностью загружена?

ответ

Смежные вопросы