jquery动态加载图像

Question

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

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

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

将（？）

最好的方法是什么？

编辑：

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

似乎它不会触发缓存中的图像

Answer 1

.load()如果图像是在缓存和不会触发onload的处理程序之前没有安装.src属性设置在一些浏览器（IE）的图像。

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

如果图像在页面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 ）。