javascript - 正确的jQuery图像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>

在上面的示例中，我使用了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;
});