Question

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

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

我想在浏览器知道图片大小后立即附上活动，或者在浏览器开始下载后立即知道图片大小。

[编辑]

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

Answer 1

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

在加载完整图像之前，在某些浏览器中用于获取高度和宽度的强力方法是轮询加载图像以查找是否存在.width和.height。在Chrome中的this 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值时会立即触发加载事件，因此如果先设置.src然后设置onload处理程序，则如果图片位于浏览器缓存中，则会错过onload事件。

Answer 2

我担心onStartLoad事件不存在。您需要使用您已经了解的“加载”事件。

有一种不安全且安全的方法可以做到这一点。

$(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'));
    });
});

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

2 个答案: