Heim > Artikel > Web-Frontend > 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:
$('img').on('error', function() { $(this).attr('src', 'default.jpg'); });
Aufforderung zum Laden eines Bildes anzeigen
$('img').on('error', function() { $(this).after('<p class="load-error">图片加载失败</p>'); });
-Element hinzuzufügen, um den Eingabeaufforderungstext für einen Fehler beim Laden des Bildes anzuzeigen.
Bildcontainer ausblenden
$('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. ZusammenfassungIn 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!