浏览器无关的方式来检测何时加载图像 [英] Browser-independent way to detect when image has been loaded
问题描述
在IE中，您可以进行onreadystatechange。有载入，但我阅读了可怕的东西。 jQuery使用ready非常好地包装了DOM的加载事件。似乎很可能我只是不知道另一个很好的图书馆的图像加载的实现。
In IE, you can onreadystatechange. There's onload, but I read scary things. jQuery wraps up the DOM's load event quite nicely with "ready". It seems likely I am just ignorant of another nice library's implementation of image loading.
上下文是我可以动态生成图像（通过服务器回调），可以花费一些时间下载。在我的IE-only代码中，我设置了img元素的src，然后当onreadystatechange事件触发完成状态时，我将其添加到DOM，以便用户看到它。
The context is that I am generating images dynamically (via server callbacks) that can take some time download. In my IE-only code I set the src of the img element, then when the onreadystatechange event fires with the "complete" status, I add it to the DOM so the user sees it.
我会对本机JavaScript解决方案感到满意，或者指向一个可以完成工作的库的指针。有很多图书馆在那里，我相信这是一个我不知道正确的情况。也就是说，我们已经是jQuery用户了，所以我不想为了获得这个功能而添加一个非常大的库。
I'd be happy with a "native" JavaScript solution, or a pointer to a library that does the work. There's so many libraries out there and I'm sure this is a case of me just not knowing about the right one. That said, we're already jQuery users, so I'm not eager to add a very large library just to get this functionality.
推荐答案
注意：我在2010年写道，野外浏览器是IE 8/9测试版，Firefox 3.x和Chrome 4.x。请仅用于研究目的，我怀疑您可以将其复制/粘贴到现代浏览器中，并且无需问题就可以正常工作。
NOTE: I wrote this in 2010, the browsers in the wild were IE 8/9 beta, Firefox 3.x, and Chrome 4.x. Please use this for research purposes only, I doubt you could copy/paste this into a modern browser and have it work without issue.
我有点迟到这个聚会，也许这个答案将帮助别人...
I'm a bit late to this party, maybe this answer will help someone else...
如果你使用jQuery不要打扰股票事件处理程序（onclick / onmouseover / etc），实际上只是停止使用它们。使用他们在 API 中提供的事件方法。
If you're using jQuery don't bother with the stock event handlers (onclick/onmouseover/etc), actually just stop using them altogether. Use the event methods they provided in their API.
在图像附加到正文之前，这将提醒，因为当图像加载到内存中时加载事件被触发。它正在做你所说的：用test.jpg的src创建一个图像，当test.jpg加载做一个警报，然后将其附加到正文。
This will alert, before the image is appended to the body, because load event is triggered when the image is loaded into memory. It is doing exactly what you tell it to: create an image with the src of test.jpg, when test.jpg loads do an alert, then append it to the body.
var img = $('<img src="test.jpg" />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
在图片插入后，这将提醒身体，再次做你所说的：创建一个图像，设置事件（没有src设置，所以它没有加载），将图像附加到正文（仍然没有src），现在设置src ..现在图像被加载，以便触发事件。
This will alert, after the image is inserted into the body, again, doing what you told it to: create an image, set an event (no src set, so it hasn't loaded), append the image to the body (still no src), now set the src... now the image is loaded so the event is triggered.
var img = $('<img />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');
当然也可以添加一个错误处理程序使用bind（）合并一堆事件。
You can of course also add an error handler and merge a bunch of events using bind().
var img = $('<img />');
img.bind({
load: function() {
alert('Image loaded.');
},
error: function() {
alert('Error thrown, image didn\'t load, probably a 404.');
}
});
$('body').append(img);
img.attr('src','test.jpg');
根据@ChrisKempen的请求...
Per the request by @ChrisKempen ...
这是一种非事件驱动的方法来确定在加载DOM后图像是否损坏。此代码是 StereoChrome 的文章中的代码衍生工具，它使用naturalWidth，自然高度和完整的属性，以确定图像是否存在。
Here is a non-event driven way of determining if the images are broken after the DOM is loaded. This code is a derivative of code from an article by StereoChrome which uses naturalWidth, naturalHeight, and complete attributes to determine if the image exists.
$('img').each(function() {
if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
alert('broken image');
}
});
这篇关于浏览器无关的方式来检测何时加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
