正确的 jQuery 图像加载（）？

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

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

它在 99% 的情况下工作正常，但当浏览器首次运行时，它有时无法加载 1 个图像、2 个图像或类似的东西。就像“加载”和“正常事件”都无法工作一样。

有人可以确认我做得是否正确吗？如果图像已经存在或不存在，我尝试加载该事件，然后有替代的“load()”以确保它在加载后执行。从逻辑上讲，这似乎是一个很好的解决方案。

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

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