正确的 jQuery 图像加载（）？

Question

<script type="text/javascript">
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);
});
</script>

在上面的示例中，我使用 grayScale() 函数将图像复制到画布中并保留两个版本（灰色 = 默认，颜色 = 悬停）。

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

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

<img> 标记所在的位置，将它们替换为 <div> 标记，在其中添加 data-src 属性，这将包含图像的 URL。

加载文档后，使用遍历所有<div> 标记的脚本并将<img> 标记插入<div> 标记中，例如：

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 树可以停止触发 对于已经存在于浏览器缓存中的图像

阅读here

如果可以，请使用它，

$(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');
    }
});

尽量避免重复代码，这不是最佳实践。