Nascondi immagini spezzate jQuery

Question

Ho contenuto con immagini spezzate, più immagini in ogni pagina. Alcune immagini hanno un valore src vuoto e alcuni link 404 appena interrotti.

Ho cercato di utilizzare

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

non funziona come previsto, non funziona in IE, e in cromo devo ricaricare la pagina dopo il primo carico per nascondere le immagini. Cercate molto su Google, ma tutti gli altri codici sono uguali.

La modifica del tag <img> NON è un'opzione per me.

Cosa c'è di sbagliato con quel codice?

Answer 1

usarlo al posto

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

test

o si può fare per tutte le vostre immagini

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

demo

Answer 2

Per le immagini che potrebbero esistere trovo più elegante la soluzione sta usando $ ajax, come:

$.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*/ 
    } 
}); 

Ma alcune persone come useing immagini hiden che si mostrano dopo il carico come:

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

Entrambe le soluzioni sono efective, utilizzare uno che si adatta meglio il vostro problema

bene se u non è possibile modifica img prova qualcosa del tipo:

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

BTW hai un'immagine id o hai bisogno di fare questo per quantità casuale di immagini di chi non hai ???

Answer 3

E 'molto semplice,

Non vi resta che aggiungere un attributo onerror:

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

Se l'immagine dà un errore nasconde

Answer 4

stavo lavorando su un qualcosa di simile in cui ho ho dovuto aggiornare il mio DOM usando un feed JSON che consisteva in URL di immagini ma prima di aggiornare il DOM ho dovuto rilevare immagini rotte ed evitare anche il caricamento di immagini con larghezza> 1000px. Ho provato ad aggiungere soluzioni onner in-line e interrogare DOM dopo aver caricato la pagina e rimuovere o nascondere il div prima della sua visualizzazione, ma è stata un'esperienza utente costosa e ostacolata. Penso che questo sia un approccio migliore e salva la query DOM e può funzionare su qualsiasi browser.

Ecco la soluzione su 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

Perché non solo si combinano eventi DOM con jQuery:

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

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

Questo ha funzionato per me.