图像开始下载的事件是什么？

Question

我知道jQuery.load(),<img>完成下载后会被解雇.

我想知道浏览器开始下载图像时会触发什么事件.通常在第一时刻,浏览器知道图片的大小,然后需要一段时间(取决于图片大小)来下载图片.

我想在浏览器知道图片大小后立即附上一个事件,或者一旦浏览器开始下载它.

[编辑]

感谢来自@ jfriend00的想法,现在我setInterval用来检查尺寸.但不是图片的大小,有些浏览器在完成下载之前就没有告诉.所以我检查容器的大小.一旦浏览器知道图片大小,它将调整容器大小.瓦拉,做完了.

Answer 1

浏览器不会提供特殊事件,它会告诉您最早知道图像大小的时间(在下载图像之前).您所能做的就是设置一个合适的加载处理程序,以了解图像何时完成下载,然后知道其大小.

这似乎在某些浏览器携手合作,获得高度和宽度稍完整的图像加载之前蛮力方式是轮询加载图像的存在.width和.height.在这个jsFiddle in Chrome中,它有时在onload()事件发生之前可用.我没有在其他浏览器中测试过这个.

如果你去一个onload处理程序的路由,你的图像标记具有.src特定的是在页面的HTML中,确保在加载时得到通知的唯一方法是放置一个内联图像处理程序,以便从中安装处理程序一开始:

<img src="xxx.jpg" onload="handleLoad(this)">

尝试从页面javascript附加事件处理程序可能为时已晚(图像加载完毕后).浏览器不提供中间事件信息(例如,当它知道大小,但尚未完成下载图像时).

对于动态创建的图像对象(您在javascript中创建的图像对象),可以在创建对象时为load事件附加侦听器.

var img = new Image();
img.onload = function() {
    // the image is now loaded here and height and width are known
};
img.src = "xxxx.jpg";

注意:使用动态创建的图像对象执行此操作时,必须onload在设置.src值之前设置处理程序.在IE的某些版本中,如果图像被缓存,则在设置.src值时将立即触发加载事件,因此如果.src先设置然后设置onload处理程序,onload则如果图像位于浏览器缓存中,您将错过该事件.