6

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

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

我想在浏览器知道图片大小或浏览器开始下载图片后立即附加一个事件以了解图片大小。

[编辑]

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

4

2 回答 2

6

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

在某些浏览器中似乎可以在加载完整图像之前稍微获取高度和宽度的蛮力方法是轮询加载图像是否存在.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因此如果您.src先设置然后设置处理程序，如果图像在浏览器缓存中onload，您将错过该事件。onload

于 2012-08-20T21:50:23.243 回答
-1

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'));
    });
});
于 2012-08-20T21:48:51.730 回答