jQuery,JavaScript,HTML:如何在加载其他所有内容后加载图像？

Question

嘿伙计们,我有一个非常复杂的页面,有很多脚本和相当长的加载时间.在该页面的顶部,我想实现jquery Nivo Slider(http://nivo.dev7studios.com/).

在文档中,它说我必须在div#slider中列出滑块的所有图像

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

但是我可能有10张1000x400px的图像非常大.页面加载时会加载这些图像.由于它们在我的标题中,这可能需要相当长的时间.

我正在寻找一种方法来使用任何jquery Slider插件(如nivo滑块),但要么在我的页面上的其他所有内容都加载后动态加载图像或加载所有这些图像.

知道如何解决这个问题吗？

甚至还有一种方法可以在页面上的其他内容加载后启动javascript进程？如果有一种方法我可能有我的问题的解决方案(使用jquery ajax load()方法)...但是我不知道如何等待其他一切加载,然后启动所有图像的滑块.

Answer 1

这就是我们所做的和它的工作.我们跳过设置src属性img并将img-location添加到假属性中lsrc.然后我们加载一个带有lsrc值的动态图像,并src仅在加载后设置实际图像.

它不是关于更快的加载,而是关于仅在完全下载到您的页面上时显示图像,以便用户不必看到恼人的半载图像.在加载实际图像时可以使用占位符图像.

这是代码.

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

编辑:Trick是src仅在临时img中加载该源时设置属性.$(img).load(fn);处理那个.