В продолжение моего предыдущего поста об обнаружении и удалении поврежденных изображений я углубился в сферу использования jQuery для замены поврежденных изображений с помощью AJAX .
В большинстве браузеров тег ALT отображается, если изображение не найдено. Это может быть проблемой, если изображение маленькое, а тег ALT длинный, так как кажется, что выходная ширина элемента не определяется длиной тега alt. Поэтому имеет смысл заменить битые изображения изображением по умолчанию.
Получить информацию о текущих изображениях на странице
$("img").each( function () { console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width()); }); Использование AJAX для проверки существования изображения
$("img").each( function () { $.ajax({ url:$(this).attr('src'), type:'HEAD', error: function(){ //image doesn't exist console.log('ERROR'); }, success: function(){ //image exists console.log('success'); } }); }); /* Output: success success ERROR success success */
Обновить изображение
d = new Date(); $("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //cache flush
Исправить испорченные изображения с помощью ajax
Обратите внимание на дополнения _this и e.status.
$(".productBoxImage img").each( function () { var _this = $(this); $.ajax({ url:$(this).attr('src'), type:'HEAD', async: false, error: function(e) { if (e.status == '404') { $(_this).attr('src',[replaceImageUrl]); } } }); });
Не Ajax-версия функции
/** * Returns true if image is broken, false otherwise * @param {jQuery} image A single image element * @return {Boolean} */ isImageBroken: function(image) { $image = $(image); if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '') { return true; } return false; },
Надеюсь, что все имеет смысл, если не оставить комментарий, и я отвечу на ваш вопрос! 🙂