1

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

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

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

将（？）

最好的方法是什么？

编辑：

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

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

4

2 回答 2

3

.load()如果图像在缓存中并且在某些浏览器 (IE) 中的图像上设置属性onload之前未安装处理程序，则不会触发。.src

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

如果图像在页面 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
}
于 2013-02-25T18:30:54.347 回答
1

在现代浏览器中，您可以使用该complete属性来检查图像是否已完成加载，即使它已被缓存。就像是：

$("#myimg").on('load', function () { /* get new width */ });

if ($("#myimg").attr('src', 'image.jpg').prop('complete')) {
    /* get new width */
}

（以防万一.prop不起作用，您可以使用.get(0).complete）。

于 2013-02-25T18:24:54.727 回答