jquery动态加载图像

时间:2013-02-25 18:21:38

标签: javascript jquery

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

如果图像已经在缓存(?)中,

.load()似乎不会触发,但我不想在这种情况下再次加载它,如:

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

将(?)

最好的方法是什么?

编辑:

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

如果缓存中的图像已经

,它似乎不会触发

2 个答案:

答案 0 :(得分:3)

如果图像在缓存中并且在某些浏览器(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
}

答案 1 :(得分:1)

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

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

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

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