javascript - jquery动态加载图片

Question

我有一个 img 元素，每次我动态更改它的 src 时，我都想获得新图像的宽度(在它完全加载后)

.load() 如果图像已经在缓存中(？)似乎不会触发，但在这种情况下我不想再次加载它，因为:

   'image.jpg?' + new Date().getTime();

会(？)

最好的方法是什么？

编辑:

$('#test img:first').load(function() {
    console.log($(this).width());
});

如果图像已经在缓存中，似乎它不会触发

Answer 1

如果图像在缓存中并且 onload 处理程序未安装在 .src 之前，则

.load() 将不会触发在某些浏览器 (IE) 中，图像上设置了属性。

如果图像是使用 javascript 动态创建的，那么只需确保在设置 .src 属性之前分配了 onload 处理程序。

如果图像在 HTML 页面中，那么保证您获得该特定图像的 onload 事件的唯一方法是在 HTML 本身中指定一个 onload 处理程序。无法为 HTML 中的图像安装带有 javascript 的 onload 处理程序并确保它被调用，因为在任何 javascript 运行之前图像可能已经加载。

您可以使用 .complete 属性检查图像是否已加载。

因此，在您的 HTML 中使用图像的解决方法是:

var img = $('#test img:first');
if (!img[0].complete) {
    img.load(function() {
        // onload code here
    });
} else {
   // image already loaded
}