Jquery img.load问题

我正在使用jQuery 循环插件来循环浏览一些图像。 这些图像都包含在DIV中。 我不希望循环插件在所有图像加载之后运行，或者至少在前4或5之后运行，以便不会出现尚未加载的图像。 有这么简单的方法吗？

我尝试将一个类’lastImg’添加到div中的最后一个img，并添加一个’load’事件

Markup 
    
 JQuery $('lastImg').load(function(){ $('#cycle').cycle({..}); }); 

这在Chrome和FF中似乎没问题，不可否认它有点松懈（有时它不起作用，也许如果图像在缓存中？）而在IE中根本没有（惊喜，惊喜……）。

关于我如何做到这一点的任何其他建议？

Answer 1

标记：

试试这个：

 var cyclerLoaded = false; var numberOfPreloaded = 0; function imageLoaded() { numberOfPreloaded++; if (numberOfPreloaded >= 4 && !cyclerLoaded) { $('#cycle').cycle({..}); cyclerLoaded = true; } } $(document).ready(function() { $('img.preload').each(function() { // Get image instance. var image = new Image(); image.src = $(this).attr('src'); if (image.complete) imageLoaded(); else image.onload = imageLoaded; }); }); 

… preload类附加到要预加载的所有图像。

Answer 2

为什么不在文档的加载事件中连接循环插件？ 下载所有艺术品后，文档的加载事件将触发。 [DOM可用时会触发就绪事件。]

尝试

 $(document).load(function() { //your cycle plugin hookup } ); 

Answer 3

更好的方法是编写一个函数来预加载足够数量的图像，然后调用循环函数。 因为页面中图像的加载方式，时间和顺序可能因浏览器或其他情况而异。

这是ajaxian的一个很棒的小function，可以预加载页面中引用的样式表中可用的所有图像。

Answer 4

你的代码中有一个问题是你使用的是$('lastImg') ，但它应该是$('.lastImg') 。

因此，您的代码永远不会运行。