在javascript中检测图像404
用户上传文件后，我们必须对图像进行一些额外的处理，例如resize并上传到S3。 这可能需要多达10秒的时间。 显然我们在后台做这个。 但是，我们希望立即向用户显示结果页面，并简单地显示spinners，直到图像到达s3的永久家中。
我正在寻找一种方法来检测某个图像无法正确加载（404）在跨浏览器的方式。 如果发生这种情况，我们希望使用JS来显示一个微调器，并每隔几秒重新载入镜像，直到可以从S3成功加载镜像。
来自： 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' });
处理<img>元素的onerror事件。
只是绑定错误事件的attr触发器。
$(myimgvar).bind('error',function(ev){ //error has been thrown $(this).attr('src','/path/to/no-artwork-available.jpg'); }).attr('src',urlvar);
第一select：
<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>
第二select：
<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>
Fidler中的示例 https://jsfiddle.net/dorathoto/8z4Ltzp8/
这工作对我来说（我的咖啡是）。 当然，你需要用微调代替。
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）;
- 如何知道在Firefox中点击刷新button或浏览器后退button
- 如何使用jQuery检测浏览器是否为Chrome？
- 如何在WinForms应用程序中closuresIE WebBrowserControl上的兼容性视图？
- 跨浏览器是如何锚元素的ping属性？
- 有效的最大mailto：体长
- 如何在Selenium WebDriver中为FirefoxDriver，ChromeDriver和IEdriver执行基本身份validation？
- 图像缩放会导致Firefox / Internet Explorer中的质量不佳，但不是Chrome浏览器
- 如何添加/删除JavaScript中的类？
- 如何修复JavaScript的Internet Explorer浏览器中的Array indexOf（）
