Скрыть сломанные изображения jQuery

Question

У меня есть контент с разбитыми изображениями, несколькими изображениями на каждой странице. Некоторые изображения имеют пустое значение src и некоторые только сломанные 404 ссылки.

Я пытался использовать

<script type="text/javascript"> 
$(document).ready(function() { 
    $("img").error(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 

Это не работает, как и ожидалось, не работает в IE, и в хроме я должен перезагрузить страницу после первой загрузки, чтобы скрыть изображения. Googled много, но все остальные коды одинаковы.

Редактирование тега <img> НЕ является вариантом для меня.

Что не так с этим кодом?

Answer 1

Используйте его вместо

<img src="image.png" onError="this.onerror = '';this.style.visibility='hidden';" /> 

test

или вы можете сделать это для всех изображений

$(window).load(function() { 
    $("img").each(function(){ 
     var image = $(this); 
     if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){ 
     $(image).unbind("error").hide(); 
     } 
    }); 
}); 

demo

Answer 2

Для изображений, которые могут существовать я найти самый элегантный решение использует $ ajax, например:

$.ajax({ 
    url: 'your_image.jpg', 
    type: "POST", 
    dataType: "image", 
    success: function() { 
     /* function if image exists (setting it in div or smthg.)*/ 
    }, 
    error: function(){ 
     /* function if image doesn't exist like hideing div*/ 
    } 
}); 

Но некоторые люди, как использованияКонтактная спрятана изображения, которые показывают себя после нагрузки, как:

<img src="your_image.jpg" onload="loadImage()"> 

Оба решения efective, используйте тот, который подходит вашей проблемы лучше всего

хорошо, если и не может редактировать img попробовать что-то вроде:

$(document).ready(function() { 
    $("#img").hide(); 
    $('#img').load(function() { 
    $("#img").show(); 
    }); 
}); 

У вас есть идентификатор изображения или вам нужно сделать это для случайное количество фотографий whos id у вас нет?

Answer 3

Это очень просто,

Вы просто должны добавить OnError атрибут:

<img src="image.png" onerror='$(this).hide();'/> 

Если изображение дает ошибку она скрывает

Answer 4

я работал на что-то подобное, где я должен был обновить мою DOM, используя канал JSON, который состоял из URL-адресов изображений, но перед обновлением DOM мне пришлось обнаруживать сломанные изображения, а также избегать загрузки изображений шириной> 1000 пикселей. Я попытался добавить встроенные решения onerror и запросить DOM после загрузки страницы и удалить или скрыть div до его отображения, но это было дорогостоящим и затрудняло работу с пользователем. Я думаю, что это лучший подход и сохраняет запрос DOM и может работать в любом браузере.

Вот решение на jsfiddle. http://jsfiddle.net/vchouhan/s8kvqj3e/60/

$(document).ready(function() { 
// For demo purposes, I'm going to pass this URL variable to my function. 
//resolved URL 
var url = "http://asmarterplanet.com/mobile-enterprise/files/bus-stop-app.png", 

//broken url 
brokenUrl = "http://pbs.twimg.com/profile_images/481800387230318592/pVyU2bzj_normal.jpeg"; 

    //Method takes the URL as a parameter to check if it resolves 
var f_testImage = function(url){ 
    /* 
     When the preloadImages Async call returns the object 
     Validate and do the needful 
    */ 
    $.when(f_preloadImages(url)).done(function (returnedObj){ 
     /* 
      If successful and Width > 500 
      (this was for my purpose, you can ignore it) 
     */ 
     if (returnedObj && returnedObj.width > 500) { 
      alert("width greater than 500px: "+ returnedObj.width + "px"); // Alerts src.width > 500     
     } else { 
      alert("width smaller than 500px: "+ returnedObj.width + "px"); // Alerts src.width < 500    
     } 
    }).fail(function(returnedObj){  // Fail condition captured through imgDfd.reject();  
     alert("image URL is broken and the width is: " + returnedObj); 
    }); 
}; 

var f_preloadImages = function(imgurl) { 
    var img = new Image(); // declare new img object 
    imgDfd = new $.Deferred();// declare new deferred object 

    // Test onload 
    img.onload = function() { 
     return imgDfd.resolve(img); 
    }; 
    // Test onerror 
    img.onerror = function() { 
     return imgDfd.reject(0); 
    }; 

    //Add imgURL to imgSrc after onload and onerror is fired 
    img.src = imgurl; 
    return imgDfd.promise(); 
}; 

//Fire testImage with url and then with brokenUrl as parameter 
f_testImage(brokenUrl); 

});

Answer 5

Почему не просто объединить события DOM с JQuery:

$("img").each(function() { 
    var $this = $(this); 

    this.onerror = function() { 
     $this.hide(); 
    }; 
}); 

Это работает для меня.