jQuery load（）函数不适用于鼠标悬停的图像答案

【问题标题】：jQuery load() function not working on images with mouseoverjQuery load（）函数不适用于鼠标悬停的图像
【发布时间】：2014-06-25 15:12:44
【问题描述】：

我正在尝试这样做：

$("#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() 函数仅在鼠标悬停时才被激活。看起来它正在等待鼠标悬停图像加载。如何确保它有效？

【问题讨论】：

标签： jquery

【解决方案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/

【讨论】：