适当的jQuery图像加载（）？

 jQuery(document).ready(function(){ setTimeout(function(){ jQuery('.my-image').each(function(){ jQuery(this).greyScale({ fadeTime: 200, reverse: false }); $(this).animate({ 'opacity' : 1 }, 1000); $(this).load(function(){ jQuery(this).greyScale({ fadeTime: 200, reverse: false }); $(this).animate({ 'opacity' : 1 }, 1000); }); }); }, 200); });  

在上面的例子中，我使用greyScale（）函数将图像复制到canvas并保留两个版本（灰色=默认，颜色=hover）。

它在99％的时间内工作正常但是当浏览器第一次运行时，它有时无法加载1个图像，2个图像或类似的东西。 这就像“加载”和“正常事件”都无法工作。

有人可以确认我做得对吗？ 我尝试加载该事件，如果图像已经存在或者它不在那里那么可以选择“load（）”以确保它在加载后执行。 从逻辑上讲，这似乎是一个很好的解

Answer 1

测试图像是否已加载的一种好方法是尝试访问其尺寸，如果可以获得图像的高度或宽度，则可以假设它已加载并对其进行灰度化。 因此，您可以修改代码来执行此操作：

 jQuery('.my-image').each(function() { var greyscale = function(image) { jQuery(image).greyScale({ fadeTime: 200, reverse: false }); } if ( jQuery(this).width() ) { // it's loaded, greyscale its ass greyscale( this ); } else { // wait for the load $(this).load(greyscale); } }); 

在这种情况下，由于您希望图像首先是灰度，我建议以编程方式插入图像：

如果你的标签在哪里，用你添加data-src属性的

标签替换它们，这将包含图像的URL。

当您加载文档时，请使用遍历所有

标记的脚本并在

标记内插入

标记，例如：

 jQuery('div.my-image').each(function() { var el = jQuery( this ); // get the src for the image var src = el.data( 'src' ); // start loading the image var img = new Image(); img.onload = function() { // greyscale it jQuery(img).greyScale({ fadeTime: 200, reverse: false }); // append it el.append( img ); } // load the image by setting the src img.src = src; }); 

Answer 2

不要依赖.load()函数来处理图像。

甚至jQuery也这么说。

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。 应该注意有几个已知的警告。 这些是：

它不能一致地工作也不能可靠地跨浏览器如果图像src设置为与之前相同的src它在WebKit中无法正确激活它没有正确地冒泡DOM树可以停止为已经存在的图像触发在浏览器的缓存中

在这里阅读

如果可以，请使用此，

 $(window).load(function(){ // Images are now loaded for sure }) 

编辑：

或者使用Paulirish的非常精简的jQuery插件

imageLoaded

Answer 3

.load()可能是一个棘手的问题，但这样的事情应该有效（请注意this.complete检查）：

 jQuery('.my-image').each(function(){ $(this).load(function(){ jQuery(this).greyScale({ fadeTime: 200, reverse: false }); $(this).animate({ 'opacity' : 1 }, 1000); }); if (this.complete) { $(this).trigger('load'); } }); 

尽量避免重复代码，这不是最好的练习。