合适的jQuery图像负载（）？(Proper jQuery image load()?)

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

在上面的例子中，我使用复制图像分成帆布，并保持这两个版本（灰色=默认情况下，颜色=悬停）灰度（）函数。

它的工作原理时细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属性，这将包含图片的网址。

当你的文件已加载，使用脚本通过所有去<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，因为它没有正确地泡了DOM树能不再火已实时图像前它不工作始终也没有可靠的跨浏览器不正确的WebKit火在浏览器的缓存

阅读这里

如果可以的话，用这个，

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

尽量避免重复代码，它不是最好的做法。

文章来源: Proper jQuery image load()?