用户上传文件后，我们必须对图像进行一些额外的处理，如调整大小和上传到S3。这可能需要额外的10秒。显然，我们是在后台执行此操作的。但是，我们希望立即向用户显示结果页面，并在图像到达其在S3上的永久主页之前显示微调器。我正在寻找一种方法来检测某个图片在跨浏览器的情况下没有正确加载（404），如果发生这种情况，我们希望使用JS在它的位置显示一个微调器，并每隔几秒钟重新加载一次图片，直到它可以从s3成功加载。
iqih9akk1#
处理<img>元素的onerror事件
<img>
onerror
vngu2lb82#
第一个选项：
<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>
附言：这是纯javascript！你不需要任何库。（Vanilla JS）
Fidler示例
https://jsfiddle.net/dorathoto/87wd6rjb/1/
j0pj023g3#
出发地：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' });
4si2a6ki4#
只需在错误事件上绑定attr触发器。
$(myimgvar).bind('error',function(ev){ //error has been thrown $(this).attr('src','/path/to/no-artwork-available.jpg'); }).attr('src',urlvar);
gudnpqoy5#
我刚刚做了
if ($('#img')[0].naturalWidth > 0) {
正如我注意到的，如果图像404'd，则没有naturalWidth。不过，我可以理解要用上面的方法.
wztqucjr6#
这对我很有效（我的在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"); }); }); };
$（文档）.on（“页面：加载”，checkImages）;
6条答案
按热度按时间iqih9akk1#
处理
<img>元素的onerror事件vngu2lb82#
第一个选项：
第二种选择：
附言：这是纯javascript！你不需要任何库。（Vanilla JS）
Fidler示例
https://jsfiddle.net/dorathoto/87wd6rjb/1/
j0pj023g3#
出发地：http://lucassmith.name/2008/11/is-my-image-loaded.html
这里如何使用它：
4si2a6ki4#
只需在错误事件上绑定attr触发器。
gudnpqoy5#
我刚刚做了
正如我注意到的，如果图像404'd，则没有naturalWidth。
不过，我可以理解要用上面的方法.
wztqucjr6#
这对我很有效（我的在coffeescript里）。当然，你需要用一个旋转器来代替。
我猜javascript的等价物大概是
$（文档）.on（“页面：加载”，checkImages）;