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

Question

我知道jQuery.load()，它是在<img>完成下载后触发的。

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

我想附加一个事件，以了解图片大小，一旦浏览器知道，或一旦浏览器开始下载它。

编辑

谢谢@jfriend00的想法，现在我使用setInterval检查大小。但没有大小的图片，有些浏览器只是不知道之前完成下载。所以我检查了容器的大小。一旦浏览器知道图片大小，它将调整容器大小。瓦拉，好了。

Answer 1

浏览器没有提供一个特殊事件来告诉您它知道图像大小的最早时间(在完成图像下载之前)。您所能做的就是设置一个适当的加载处理程序，以知道映像何时完成下载，然后知道它的大小。

在加载完整图像之前，在某些浏览器中获取高度和宽度的一种强力方式似乎是轮询加载图像，以确定是否存在.width和.height。在Chrome的这个jsFiddle中，有时在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值时，load事件将立即触发。因此，如果首先设置.src，然后设置onload处理程序，则如果图像位于浏览器缓存中，则会错过onload事件。

Answer 2

恐怕不存在onStartLoad事件。您需要使用看起来已经知道的“load”事件。

有一个不安全和安全的方法来做这件事。

$(function() {
    $(imgNodeSelector).on('load', function(){
        //do stuff here
    });
});

这是不安全的，因为有些浏览器可以在“onDomReady”事件触发之前加载缓存的图像，在这种情况下，加载处理程序放置得太晚了--它将“错过了船”。因此，执行以下操作更安全：

HTML：

<img class="delayedLoad" src="" data-src="path/to/images/myImg.jpg" />

javascript：

$(function() {
    $("img.delayedLoad").each(function() {
        $img = $(this);
        $img.on('load', function() {
            //do stuff here
        }).attr('src', $img.data('src'));
    });
});