So überprüfen Sie mit jquery, ob ein Bild vorhanden ist

Für Websites, die Bilder anzeigen müssen, speichern wir möglicherweise den Pfad des Bildes in der Datenbank oder in den über die API zurückgegebenen Daten. Wenn wir Bilder auf der Seite anzeigen müssen, kommt es manchmal vor, dass das Bild nicht vorhanden ist. Zu diesem Zeitpunkt führt die Anzeige leerer Bilder auf der Seite zu einem schlechten Erlebnis für den Benutzer. Um das Benutzererlebnis zu verbessern, können wir mit jQuery prüfen, ob das Bild vorhanden ist, und es entsprechend verarbeiten.

1. Überprüfen Sie mit jQuery, ob das Bild vorhanden ist.

Mit der Methode .load() können wir erkennen, ob das Bild erfolgreich geladen wurde. Die Methode .load() löst ein Ereignis aus, wenn das ausgewählte Element vollständig geladen wurde. Wenn das Bild erfolgreich geladen wurde, wird das Ladeereignis ausgelöst; andernfalls wird das Fehlerereignis ausgelöst, wie unten gezeigt:

$('img').on('load', function() { console.log('Image is loaded'); }).on('error', function() { console.log('Image is not loaded'); });

Im obigen Beispiel wählen wir zuerst alle Bildelemente aus und hören uns dann deren Ladevorgang an Fehlerereignisse: Wenn das Bild erfolgreich ist, wird beim Laden „Bild wird geladen“ ausgegeben, andernfalls wird „Bild wird nicht geladen“ ausgegeben.

2. Behandeln Sie die Situation, wenn das Bild nicht vorhanden ist.

Wenn wir feststellen, dass das Bild nicht vorhanden ist, können wir wie folgt damit umgehen:

1. Zeigen Sie das Standardbild an nicht vorhanden ist, können wir für jedes Bild auf Ihrer Website ein Standardbild „Noch kein Bild“ hinzufügen. Wenn festgestellt wird, dass das Bild nicht vorhanden ist, können wir das Standardbild anzeigen, indem wir das src-Attribut des Bildelements ändern. Der Code lautet wie folgt:

$('img').on('error', function() { $(this).attr('src', 'default.jpg'); });

Nach dem Login kopieren

Aufforderung zum Laden eines Bildes anzeigen

2. Wir können auch einen Aufforderungstext an der Bildposition anzeigen, wenn das Laden des Bildes fehlschlägt, um den Benutzer daran zu erinnern, dass das aktuell angezeigte Bild nicht geladen werden konnte. Der Code lautet wie folgt:

$('img').on('error', function() { $(this).after('
图片加载失败
'); });

Nach dem Login kopieren

-Element hinzuzufügen, um den Eingabeaufforderungstext für einen Fehler beim Laden des Bildes anzuzeigen.

Bildcontainer ausblenden

3. Wenn das Bild nicht vorhanden ist, können wir auch seinen Container (z. B.
   -Element) ausblenden, um das Seitenlayout schöner zu gestalten. Der Code lautet wie folgt:

$('img').on('error', function() { $(this).parent().hide(); });

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo überprüfen Sie mit jquery, ob ein Bild vorhanden ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!