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

我有一个非常复杂的页面，有很多脚本和相当长的加载时间。在该页面的顶部，我想实现jquery Nivo滑块（）

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

然而，我可能有10个1000x400px的图像，这是相当大的。这些图像将在页面加载时加载。因为它们在我的标题中，这可能需要相当长的时间

我正在寻找一种方法来使用任何jquery滑块插件（比如nivo滑块），但要么动态加载图像，要么在页面上的所有其他内容加载后加载所有这些图像

你知道我该怎么解决吗

---

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

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

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

//your function implementation here...

});
</script>

jQuery（函数（）{
//您的函数实现在这里。。。
});

jquery load（）事件，它等待包括图形在内的所有内容

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

加载时，您可以使用以下方式加载图像：

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

您也可以在图像中添加onload函数

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

---

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

您的HTML将只包含：

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

然后您的jquery将是：

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

jQuery（函数（）{
$（“#滑块”）。附加（“”）；
});

以下是我们所做的工作，其效果非常好。我们跳过了设置

img

的

src

属性，并将img位置添加到假属性

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）处理这个问题

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

下面的示例是一个带有图像回调的延迟加载多服务响应图像示例：）如果您的设备宽度小于420 px，它将提供更轻、更小版本的图像。加载图像后，它将删除回调中的加载程序

在Html中

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

---

我正在使用下面的按钮启动滑块并提高页面加载性能

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

---

为什么不尝试最小化你的图片，然后将它们链接到更大的版本？你为什么不这样做$（'img'）.each（function（）{$（this.attr（'src'，$（this.attr（'lsrc'））；}）；你的方式可能更快吗？@DrewBaker问题不在于加载速度更快，而在于只有当图像完全下载到你的页面上时才显示图像，这样用户就不必看到那些讨厌的半加载图像了。@simplyharsh，我确信我理解了。这意味着

$（window.load（）仍需等待图像加载后才能启动？@FernandoSilva不，这是技巧的一部分。窗口加载不会等待，因为它将在
img
标记中查找
src
属性
img
带有伪
lsrc
属性的标记，在加载绑定上没有任何意义。@我现在明白了，所以
src
将是设置加载gif的完美地方。。。ThksThis不正确，因为此函数绑定到DOM就绪事件而不是窗口加载。窗口加载事件是一个告诉您其他所有内容都已加载的事件。
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);
        }
   });

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