IE上的图像加载事件 [英] image load event on IE

问题描述

我正在开发一个网站，我必须将未找到的图像的src设置为错误图像。

I am developing a site, and I have to set the src of the not found images, to an error image.

方法.load（）和。除了在IE中，error（）始终有效。
我一直在搜索，我发现了这个：

the methods .load() and .error() works always except in IE. I have been searching, and I have found this:

IE在页面刷新时没有调用JQuery .load（）函数的问题 - 跟踪到图像缓存

将查询字符串添加到图像中，始终从服务器加载，并且.load（）和.error（）方法正常工作，但站点是太大了，我真的无法每次从服务器加载站点中的所有图像，而无需从缓存中加载它。

Adding the query string to the image, always loads it from server, and .load() and .error() methods works properly, however the site is quite too big, and I really can't load all images in site every time from server, without loading it from cache.

任何关于如何使用这种方法的想法，每次IE浏览器没有加载服务器的负载，或者其他检查图像是否已经正确加载的方式在IE中工作？

Any ideas of how make work this methods, without load from server every time the images for IE, or other way to check if image has been loaded correctly or not that work in IE?

提前致谢

推荐答案

这是一个非常老的错误，实际上已在除IE之外的所有现代浏览器中修复。
如果从缓存中获取图像，则它们不会触发onload事件。

This is a very old bug that actually was fixed in all modern browsers except IE. They didn't trigger onload event if image was obtained from cache.

但是每个试图创建的人都知道一种解决方法几年前javascript中的图片库：）

But there is a workaround that is well-known by every person who tried to create an image gallery in javascript a couple of years ago:)

图片DOM元素有一个属性 .complete 表示图像是否已加载。您可以在脚本加载时检查此属性。如果图像在缓存中，img.complete将在页面加载后立即返回：

Image DOM element has a property .complete that indicates whether image was loaded or not. You can check this property on script load. If image is in the cache img.complete will return true right after page loaded:

$('img').each(function(){
    //this code will not run in IE if image is in the cache
    $(this).on('load', function(){
       checkImage(this);
    });

    //this code will run if image is already in the cache
    if (this.complete) checkImage(this);
});

function checkImage(){
   //your code for checking image
}

这篇关于IE上的图像加载事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！