Die Erkennung von Gebrochenen CSS "hintergrund-Bilder" in JavaScript/jQuery

Hier ist ein Beispiel, um zu erkennen gebrochenen Bildern

http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/

aber ist es möglich zu erkennen, eine defekte hintergrund-Bild?
Zum Beispiel:

<div style="background-image:url('http://myimage.de/image.png');"></div>
  • Erhalten Sie eine Fehlermeldung, in tools wie Firebug, wenn Sie versuchen, laden ein broken image
  • Ich weiß, ich weiß. Ich versuche ein Update-Skript. Wenn der Benutzer eine Seite mit einem gebrochenen Bild -> legen Sie die pageUrl (oder post-id) in eine spezielle mySql-DB.
InformationsquelleAutor Peter | 2012-10-22
  1. 1

    Haben Sie die Kontrolle über die "404 not found" - Seite auf deinem server? In diesem Fall könnte es zu einem script, das sucht .jpg/.png/.gif in der angeforderten URL und melden Sie sich entsprechend, dann ist die Ausgabe eine 404-Seite an den Benutzer.

    InformationsquelleAutor Jan
  2. 5

    Ich glaube nicht, dass Sie brauchen, um über jQuery oder javascript, Ihnen zu sagen, ob ein link defekt ist. Verwenden Sie Firebug in Firefox und es wird die Art aus den meisten Problemen:

    https://addons.mozilla.org/en-us/firefox/addon/firebug/

    Edit:
    Nun, ich weiß, dass es für ein auto-Update, hatte ich schnell einen Blick auf ihn und kam mit dieser:

    var imageURLs = $('div');
imageURLs.each(function(index, element){
    var imageURL = $(element).css('background-image').replace('url("', '').replace('")', '');
    if (imageURL != "none"){
        $.ajax({
           url: imageURL,
           type: 'HEAD',
           error: function(){
              //error handling for broken image url
           }
        });
    }
});

    Hinzufügen, dass zu Ihrer Seite, nachdem es geladen hat und es scannt alle div-Elemente für jede defekte css-hintergrund-Bilder. Gibt es vielleicht einen besseren oder schnelleren Weg, dies zu tun, aber dies ist die Allgemeine Idee.

    Edit 2: ich bemerkt, wenn ich getestet das Skript .css('background-image') gibt eine Zeichenfolge zurück, die mit "url()" umschließt die Bild-url. Dies führte in der ajax-Aufruf fehlschlägt auf alle urls. Ich änderte es und sanktioniert ajax-Aufrufe auf nur Elemente, die mit css Hintergründe. Der obige code funktioniert jetzt perfekt! 😀

    • Ich denke, die OP ist auf der Suche nach einer script-Lösung zu automatisieren follow-up-Aktionen.
    • jsfiddle.net/PbNfX <- Hat nicht funktioniert? ... seltsam oO
    • Ich weiß nicht, warum jsfiddle sagt, dass auch die richtigen hintergrund Bild hat einen Fehler. Aber getestet habe ich es auf meinem server und es funktioniert gut. In Firebug, jsfiddle sagt, dass der Antrag war ok, aber hat immer noch ein Fehler. Es kann nur sein, etwas zu tun, mit Ihren API. Versuchen Sie, auf Ihrer website statt.
    • Gleich auf meine Seite :/ ... das problem ist vielleicht das cross-site-requests?
    • Ich habe nicht getestet, dieser link, aber es sieht aus wie es funktionieren könnte: james.padolsey.com/javascript/cross-domain-requests-with-jquery. Gehen Sie zu seiner github und demo seinem plugin. Lassen Sie mich wissen 🙂
    • Zwingt den Benutzer zum herunterladen der Bilder zweimal für Sie zur Fehlerüberprüfung Ihre Website für defekte links ist kindof böse.
    • Funktioniert nicht. Ich weiß nicht, warum, aber jquery nicht erkennen kann, das 404.
    • dies kann schlecht sein für die Produktion, aber ist nützlich für die automatisierte Prüfung.

    InformationsquelleAutor WizzHead
Schreibe einen Kommentar