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

嘿家伙，我有一个非常复杂的页面，有很多脚本和相当长的加载时间。在该页面的顶部，我想实现jQuery Nivo Slider（http://nivo.dev7studios.com/）。jQuery，JavaScript，HTML：如何在加载其他所有内容后加载图像？

在它说我必须列出一个div＃滑块

<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>

不过，我可能有一个1000x400px这是相当大的10张图像内滑块所有图像文件。这些图像将在页面加载时加载。由于他们在我的头上，这可能需要一段时间。

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

任何想法如何解决这个问题？

甚至有一种方法可以在页面上的其他所有内容加载后启动javascript过程吗？如果有什么办法可以解决我的问题（使用jquery ajax load（）方法）...但是我不知道如何等待其他所有内容加载，然后用所有图像启动滑块。

来源

2011-03-23 matt

为什么不尝试最小化图像，然后将它们链接到较大的版本？ – corroded 2011-03-23 08:51:20

这是我们做的，它的工作很棒。我们跳过设置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; 
         }); 
        } 
       } 
      }); 
    });

编辑：诀窍是设置src属性仅当源在临时IMG被加载。$(img).load(fn);处理。

来源

2011-03-23 08:59:02 simplyharsh

谢谢你，好主意！它也可以在IE中工作吗？ – matt 2011-03-23 19:35:36

你怎么没有这样做？ $（'img'）。each（function（）{（this）.attr（'src'，$（this）.attr（'lsrc'））; }）; 也许你的方式更快？ – 2011-08-16 03:22:47

@matt是的，它也适用于IE。 – simplyharsh 2012-06-14 09:15:05

-2

jQuery有用于执行JavaScript语法文件加载后：

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

//your function implementation here... 

}); 
</script>

来源

2011-03-23 08:49:09 Xhalent

或$（function（）{ ））; – 2011-03-23 08:54:25

这是不正确的，因为此函数绑定到DOM就绪事件，而不是窗口加载。窗口加载事件是告诉你一切都被加载的事件。 – 2013-02-05 10:20:23

check out jQuery的负载（）事件，等待一切，包括图形负载

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

，那么你可以加载图像使用：

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

您可以添加一个函数onload到图像太

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

来源

2011-03-23 08:51:04

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

你的HTML只想有：

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

然后你的jquery会是：

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

来源

2011-03-23 08:53:51

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

回答

相关问题