Question

我正在尝试这样做：

$("#home .items:last-child img").load(function() { ....... });

img标签如下所示：

<img onmouseout="this.src = '/images/IMG01.jpg'" onmouseover="this.src = '/images/IMG02.jpg'" src="/images/IMG01.jpg" alt="" />

在Firefox，Chrome和Opera中，它似乎运行良好。但是在Safari和IE10中，它不起作用。在这两个浏览器中，load()函数仅在鼠标悬停操作时才会被激活。看起来它正在等待鼠标悬停图像加载。我如何确保这有效？

Answer 1

问题可能是您的图片被缓存，因此不需要加载。 jQuery documentation states that load is not reliable across browsers：

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

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

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

有些人建议在图片网址中添加缓存无效阻隔条。但是，您失去了缓存http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

的好处

我认为一个问题较少的方法是轮询image.complete属性以了解图像已完成加载。

function waitUntilComplete(img, cb) {
    if (img.complete) {
      cb(img)
    }
    else {
        setTimeout(function() {
            waitUntilComplete(img, cb);
        }, 100); // Whatever polling delay you'd like
    }
}

请参阅http://jsfiddle.net/LTjPB/2/

jQuery load（）函数无法处理带鼠标悬停的图像

1 个答案: