我有一个img元素,每次我动态更改其src我想获得新图像的宽度(在它完全加载后)
如果图像已经在缓存(?)中,.load()似乎不会触发,但我不想在这种情况下再次加载它,如:
'image.jpg?' + new Date().getTime();
将(?)
最好的方法是什么?
编辑:
$('#test img:first').load(function() {
console.log($(this).width());
});
如果缓存中的图像已经
,它似乎不会触发答案 0 :(得分:3)
.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
)。