Javascript 文档元素的特定加载顺序_Javascript_Jquery

Javascript 文档元素的特定加载顺序

javascript jquery

Javascript 文档元素的特定加载顺序,javascript,jquery,Javascript,Jquery,如图所示，使用插件显示加载过程栏，将其放置在带有徽标的png图像的正后方，从而产生完整的电影效果。背景内容完全加载后，带有加载器的前图像和隐藏所有内容的黑色div都会消失，显示网站内容并在其上执行一些动画由于没有为这些元素中的任何一个指定加载顺序，因此在执行网站时，所有内容都同时加载：速度加载程序、其前端png图像以及隐藏在黑色背景之后的内容因此，在大多数情况下，当网站第一次运行时，速度比它的正面图像先加载，破坏了效果和构图的目的我需要让它先加载前面的png图像，然后在执行PACE时开始加

如图所示，使用插件显示加载过程栏，将其放置在带有徽标的png图像的正后方，从而产生完整的电影效果。背景内容完全加载后，带有加载器的前图像和隐藏所有内容的黑色div都会消失，显示网站内容并在其上执行一些动画

由于没有为这些元素中的任何一个指定加载顺序，因此在执行网站时，所有内容都同时加载：速度加载程序、其前端png图像以及隐藏在黑色背景之后的内容

因此，在大多数情况下，当网站第一次运行时，速度比它的正面图像先加载，破坏了效果和构图的目的

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

代码：______________________

HTML:

请将相关代码添加到您的问题中-请看，我已经添加了元素，并按照它们在代码中出现的顺序对其进行了编码。最上面的先装。最后一个在底部的。谢谢Maxz，很简单。。。我会将相关元素移到顶部，并通过z索引改变它们的外观顺序。如果你想把这个作为一个答案，我会打勾，以防成功解决。如果你想公布答案，我会打勾，否则我会回答并结束问题。非常感谢。

   <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

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);
});