У меня есть функция, в которой я получаю значение img src в качестве параметра, и я хочу проверить, загружается ли это изображение с ошибкой 200 ok или 404/какой-либо другой ошибкой. Если он получает 200 ok, то я хочу внедрить тег img с этим src в DOM (я полагаю, что во время проверки он также загружается в кеш браузера, а внедрение этого тега img в DOM загружает его из кеша) . Я попытался с помощью простого фрагмента кода следующим образом:
function checkImage(src)
{
var img = new Image(),
tag = '<img src="'+src+'" />',
alt = '<span>sorry,image broken</span>';
img.onload = function(){
$('.some-container').html(tag);
};
img.onerror = function(){
$('.some-container').html(alt);
};
img.src = src;
}
Он отлично работал в Chrome, но пошел в хаос в Firefox и т. Д. (Оба они запускают только событие ошибки, независимо от того, загружается ли изображение нормально или сломалось). Вместо использования onload и onerror я попробовал использовать jquery, например:
$(img).load(...).error(...).attr('src',url);
$(img).on('load',...).on('error',...).attr('src',url);
$('<img />').load(...).error(...).attr('src',url);
$('<img />').on('load',...).on('error',...).attr('src',url);
и даже попробовал плагин jquery.imagesLoaded от desandro(https://github.com/desandro/imagesloaded ) как :
$(img).imagesLoaded().done(...).fail(...);
$(img).imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
$('<img />').imagesLoaded().done(...).fail(...).attr('src',url);
$('<img />').imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
Я также пробовал решения из:
обратный вызов jQuery при загрузке изображения (даже если изображение кэшируется)
https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8
но, как оказалось, работает в хроме, но не в FF или IE, есть ли решение, где я могу проверить изображение, которое присутствует в памяти, но не в «DOM»? Заранее спасибо.
