0 
<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()”以确保它在加载后执行。从逻辑上讲，这似乎是一个很好的解决方案。

4

3 回答 3

2

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

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;
});
于 2012-06-25T08:09:27.197 回答
1

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

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

于 2012-06-25T07:59:13.657 回答
1

不要依赖.load()图像的功能。

甚至 jQuery 都这么说。

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

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

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

在这里阅读

如果可以的话，用这个，

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

编辑：

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

图像加载

于 2012-06-25T08:10:24.923 回答