Question

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

如果图像已经在缓存（？）中，

.load（）似乎不会触发，但我不想在这种情况下再次加载它，如：

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

将（？）

最好的方法是什么？

编辑：

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

如果缓存中的图像已经

，它似乎不会触发

Answer 1

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

.src将不会触发。

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

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

您可以查看图片是否已加载.complete属性。

因此，HTML中图像的解决方法就是这样：

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

Answer 2

在现代浏览器中，您可以使用complete属性检查图像是否已完成加载，即使图像已缓存。类似的东西：

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

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

（如果.prop不起作用，您可以使用.get(0).complete）。

jquery动态加载图像

2 个答案: