Verdeckte Bilder ausblenden jQuery

Question

Ich habe Inhalt mit defekten Bildern, mehrere Bilder auf jeder Seite. Einige Bilder haben einen leeren src-Wert und einige nur gebrochene 404-Links.

Ich habe versucht,

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

Es nicht wie erwartet zu verwenden, arbeiten, im Internet Explorer nicht funktioniert, und in Chrom Ich habe die Seite nach dem ersten Last laden die Bilder zu verbergen. Viel gegoogelt, aber alle anderen Codes sind gleich.

die <img> Tageditierung ist keine Option für mich.

Was ist falsch an diesem Code?

Answer 1

Verwenden sie stattdessen

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

test

oder Sie können es für alle Ihre Bilder tun

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

demo

Answer 2

Für Bilder, die existieren könnte ich finde eleganteste Lösung verwendet $ ajax, wie:

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

Aber einige Leute wie Hiden Bilder useing, die sich zeigen, nach Belastung wie:

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

Beide Lösungen efective sind, eine, die Ihr Problem am besten passt

gut, wenn u kann nicht bearbeiten img versuchen etwas wie:

BTW haben Sie Bild-ID oder müssen Sie dies für tun zufällige Anzahl von Bildern, die du nicht hast ???

Answer 3

Es ist sehr einfach,

Sie müssen nur ein onerror Attribut hinzufügen:

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

Wenn das Bild einen Fehler gibt versteckt es

Answer 4

Ich war auf einem etwas ähnliches zu arbeiten, wo ich Ich musste mein DOM mit einem JSON-Feed aktualisieren, der aus Bild-URLs bestand, aber vor der Aktualisierung des DOMs musste ich kaputte Bilder erkennen und auch das Laden von Bildern mit einer Breite> 1000px vermeiden. Ich habe versucht, Inline-Onerror-Lösungen hinzuzufügen und DOM nach dem Laden der Seite abzufragen und das div zu entfernen oder auszublenden, bevor es angezeigt wurde, aber es war teuer und beeinträchtigte die Benutzererfahrung. Ich denke, das ist ein besserer Ansatz und spart DOM-Abfrage und kann mit jedem Browser arbeiten.

Hier ist die Lösung auf 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

Warum kombinieren DOM-Ereignisse nicht nur mit jQuery:

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

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

Das ist für mich gearbeitet. Hier