Обнаружение изображения 404 в javascript
после того, как пользователь загружает файл, мы должны сделать некоторую дополнительную обработку с изображениями, такими как изменение размера и загрузка в S3. Это может занять до 10 секунд. Очевидно, мы делаем это на заднем плане. Однако мы хотим немедленно показать пользователю страницу результатов и просто показать блесны на месте, пока изображения не прибудут в их постоянный дом на s3.
Я ищу способ обнаружить, что определенное изображение не удалось загрузить правильно (404) в кросс-браузере. Если это случается, мы хотим использовать JS, чтобы показать счетчик на своем месте и перезагружать изображение каждые несколько секунд, пока оно не будет успешно загружено из s3.
6 ответов
From: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'
});
просто свяжите триггер attr с событием ошибки.
$(myimgvar).bind('error',function(ev){
//error has been thrown
$(this).attr('src','/path/to/no-artwork-available.jpg');
}).attr('src',urlvar);
первый вариант:
<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>
пример в Fidler
это сработало для меня (мой в 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 ("page: load", checkImages);
Я только что сделал
if ($('#img')[0].naturalWidth > 0) {
Как я заметил, не было naturalWidth, если изображение 404'd.
однако я могу понять, что хочу использовать метод выше.