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 滑块插件（如 nivo 滑块）的方法，但要么动态加载图像，要么在页面上的其他所有内容加载后加载所有这些图像。

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

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

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); 处理这个问题。

Answer 2

除了 Xhalent 的答案之外，还可以使用 jQuery 中的 .append() 函数将它们添加到 DOM 中：

您的 HTML 将具有：

<div id="slider">
</div>

然后您的 jquery 将是：

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

Answer 3

查看 jquery load() 事件，它会等待所有内容，包括

$(window).load(function () {
  // run code
});

加载图形，然后您可以加载图像使用：

var image = new Image();
image.src = "/path/to/huge/file.jpg";

您也可以向图像添加 onload 函数

image.onload = function() {
  ...
}

Answer 4

我正在使用下面的内容来为我的滑块提供动力并提高页面加载性能。

   for (var i = document.images.length - 1; i >= 0; i--) {
      var this_image = document.images[i];
      var src = $(this_image).attr('src') || '' ;
      if(!src.length > 0){
        var lsrc = $(this_image).attr('lsrc') || '' ;
        if(lsrc.length > 0){
          $(this_image).attr("src",lsrc);
        }
      }
    }

Answer 5

最好的使用方法是b -lazy js。
bLazy 是一个轻量级延迟加载图像脚本（压缩和压缩后小于 1.2KB）。它允许您延迟加载和多重服务您的图像，以便您可以节省带宽和服务器请求。如果用户不浏览整个页面，他/她将获得更快的加载时间并保存加载的数据。
有关选项、函数和示例的完整列表，请访问博客文章：http://dinbror.dk/blog/炽热。

以下示例是带有图像回调的延迟加载多服务响应式图像示例:) 如果您的设备宽度小于 420 像素，它将提供更轻、更小的图像版本。当图像加载完毕后，它会在回调中删除加载器。

在 Html 中

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

在 js

var bLazy = new Blazy({
        breakpoints: [{
        width: 420 // Max-width
          , src: 'data-src-small'
    }]
      , success: function(element){
        setTimeout(function(){
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
        }, 200);
        }
   });

示例

Answer 6

jquery 有一个在文档加载后执行 javascript 的语法：

<script type="text/javascript">
jQuery(function(){

//your function implementation here...

});
</script>