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');
});

Wenn im obigen Code festgestellt wird, dass das Bild nicht vorhanden ist Wenn vorhanden, ändern wir das src-Attribut dieses Elements in default.jpg, um das Standardbild anzuzeigen.

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('<p class="load-error">图片加载失败</p>');
});

Im obigen Code verwenden wir die Methode .after(), um nach dem Bildelement ein

-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();
});

Wenn wir im obigen Code feststellen, dass das Bild nicht existiert, verwenden wir die Methode .parent(), um das übergeordnete Element des aktuellen Bildes auszuwählen, und verwenden dann die Methode .hide() Methode, um es zu verbergen.

3. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man mit jQuery prüft, ob ein Bild vorhanden ist, und es entsprechend verarbeitet. Wenn keine Bilder vorhanden sind, können wir je nach tatsächlichem Bedarf Standardbilder anzeigen, Inhalte auffordern oder Container ausblenden, um die Benutzererfahrung und das Seitenlayout zu verbessern.

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!