javascript - jQuery、JavaScript、HTML : how to load images after everything else is loaded?

Question

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

在文档中，它说我必须列出 div#slider 内 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 slider )的方法，但要么动态加载图像，要么在加载页面上的其他所有内容后加载所有这些图像。

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

是否有办法在页面上的所有其他内容加载后启动 JavaScript 进程？如果有办法我可能有一个解决方案来解决我的问题(使用 jquery ajax load() 方法)...但是我不知道如何等待其他所有内容加载，然后启动包含所有图像的 slider 。

Answer 1

这就是我们所做的，而且效果很好。我们跳过了设置 img 的 src 属性，并将 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;
                       });
                   }
               }
           });
  });

编辑:技巧是仅当源加载到临时 img 中时才设置 src 属性。 $(img).load(fn); 处理这个问题。