Question

正如您在此LIVE DEMO上看到的那样，使用插件PACE显示加载过程栏，该插件位于带有徽标的png图像后面，从而产生完整效果。在背景内容完全加载后，带有加载器的正面图像和隐藏所有内容的黑色div都消失，显示网站的内容并在其上执行一些动画。

由于没有为这些元素中的任何元素提供加载顺序，因此在执行网站时，所有内容都会同时加载：PACE加载程序，其前面的png图像以及隐藏在黑色背景后的内容。

因此，大多数情况下首次执行网站时，PACE首先会加载它的正面图像，从而打破了合成的效果和目标。

我需要先将加载前面的png图像，然后在执行PACE时开始加载所有后台内容，并显示加载过程是如何完成的。

CODE：______________________

HTML：

   <body>
//HERE GOES ALL CONTENT THAT LOADS ON THE BACKGROUND
      <div class="velo"></div>
      <div class="velo2"></div>
      <div class="logoLback"></div>
      <div class="logoL"></div> // '.logoL' MUST BE LOADED FIRST OF ALL, THIS IS THE PNG FRONT IMAGE IN FRONT OF THE LOADING BAR

JQUERY：

Pace.on("done", function(){
$height = $(window).height(); 

setTimeout(function(){     

   $('.pace-progress').animate({'opacity': 0},500); //HIDES AFETER PACE COMPLETES
   $('.logoLback').animate({'opacity': 0},0); //HIDES AFETER PACE COMPLETES

   setTimeout(function(){ 

      $('.logoL,.logoLback,.velo,.velo2').animate({'opacity': 0},1000); //HIDES AFETER PACE COMPLETES

      setTimeout(function(){
         $('.textc').animate({'width': 148,queue: false}, 1200);
         $('.pattern').animate({height: $height,queue: false}, 500);
      },1000);
      setTimeout(function(){
        $('.textc,.menu').animate({'height': 363,queue: false}, 1200);
     },2200);
   },500);
},500);
});

文档元素的特定加载顺序

0 个答案: