用户上传文件后，我们必须对图像进行一些额外的处理，例如调整大小并上传到 S3。这最多可能需要 10 秒的额外时间。显然，我们是在后台执行此操作的。但是，我们希望立即向用户显示结果页面并简单地显示微调器，直到图像到达它们在 s3 上的永久主页。
我正在寻找一种方法来检测某个图像无法以跨浏览器方式正确加载 (404)。如果发生这种情况，我们想使用 JS 在它的位置显示一个微调器，并每隔几秒重新加载一次图像，直到它可以从 s3 成功加载。
【问题讨论】：
标签： javascript jquery cross-browser dom-events
处理<img> 元素的onerror 事件。
【讨论】：
src 属性之前 挂钩error 事件（如果您使用new Image 或@987654327 执行此操作@ 而不是通过 HTML 字符串）。否则，您将处于竞争状态，并且该事件可能会在您开始处理之前触发（就像 load 事件一样）。
src 后立即处理事件，应该没有任何风险。不过，你还是对的，
load 处理程序之前设置src。那里有一个比赛条件。如果您已经注册了处理程序，则事件处理代码会将其放在执行堆栈上，以便在 JS 线程可用于执行其他操作时运行。如果你不这样做，你可能会错过这个活动。
<img> 返回404，但响应中包含图像（例如占位符图像），则error 事件不会被触发。
第一个选项：
<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>
第二个选项：
<html>
<head>
<script type="text/javascript">
function ImgError(source){
source.src = "/noimage.gif";
source.onerror = "";
return true;
}
</script>
</head>
<body>
<img src="image_example1.jpg" onerror="ImgError(this)" />
</body>
</html>
PS：它是纯 JavaScript！你不需要任何库。 （原版JS）
Fidler 中的示例
【讨论】：
发件人：http://lucassmith.name/2008/11/is-my-image-loaded.html
// First a couple helper functions
function $(id) {
return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o,t) { return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;}
// Here's the meat and potatoes
function image(src,cfg) { var img, prop, target;
cfg = cfg || (isType(src,'o') ? src : {});
img = $(src);
if (img) {
src = cfg.src || img.src;
} else {
img = document.createElement('img');
src = src || cfg.src;
}
if (!src) {
return null;
}
prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
img.alt = cfg.alt || img.alt;
// Add the image and insert if requested (must be on DOM to load or
// pull from cache)
img.src = src;
target = $(cfg.target);
if (target) {
target.insertBefore(img, $(cfg.insertBefore) || null);
}
// Loaded?
if (img.complete) {
if (img[prop]) {
if (isType(cfg.success,'f')) {
cfg.success.call(img);
}
} else {
if (isType(cfg.failure,'f')) {
cfg.failure.call(img);
}
}
} else {
if (isType(cfg.success,'f')) {
img.onload = cfg.success;
}
if (isType(cfg.failure,'f')) {
img.onerror = cfg.failure;
}
}
return img;
}
以及如何使用它：
image('imgId',{
success : function () { alert(this.width); },
failure : function () { alert('Damn your eyes!'); },
});
image('http://somedomain.com/image/typooed_url.jpg', {
success : function () {...},
failure : function () {...},
target : 'myContainerId',
insertBefore : 'someChildOfmyContainerId'
});
【讨论】：
typeof cfg.x==='function'。它比 'f' 更具可读性，而且速度更快 - 请参阅此处：jsperf.com/typeof-variations
只需在错误事件上绑定 attr 触发器即可。
$(myimgvar).bind('error',function(ev){
//error has been thrown
$(this).attr('src','/path/to/no-artwork-available.jpg');
}).attr('src',urlvar);
【讨论】：
这对我有用（我的在 coffeescript 中）。当然，您需要用微调器替换。
checkImages = ->
$("img").each ->
$(this).error ->
$(this).attr("src", "../default/image.jpg")
$(document).on('page:load', checkImages)
我猜 javascript 的等价物是这样的
function checkImages() {
$("img").each(function() {
$(this).error(function() {
$(this).attr("src", "../default/image.jpg");
});
});
};
$(document).on("page:load", checkImages);
【讨论】：
我刚刚做了
if ($('#img')[0].naturalWidth > 0) {
我注意到，如果图像 404'd，则没有 naturalWidth。
但是，我可以理解想要使用上述方法。
【讨论】：