正确的jQuery图像加载(）

Proper jQuery image load()?

本文关键字：加载 图像 jQuery      更新时间：2023-09-26
<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>标签的脚本，并在<div>标签中插入<img>标签，例如：

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

不要依赖.load()函数来处理图像。

甚至jQuery也这么说。

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

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

它

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

在这里阅读

如果可以，请使用这个，

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

编辑：

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

图像已加载

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

尽量避免重复代码，这不是最佳做法。

相关文章：