So verhindern Sie die wiederholte Anzeige von Bildern in HTML

Beim Webdesign müssen wir oft mehrere Bilder auf der Seite anzeigen, aber manchmal müssen wir verhindern, dass diese Bilder wiederholt angezeigt werden. In diesem Fall können wir einige Attribute und Techniken von HTML verwenden, um dies zu erreichen. In diesem Artikel erfahren Sie, wie Sie die wiederholte Anzeige von Bildern in HTML verhindern können.

1. Verwenden Sie das Hintergrundattribut von CSS

In HTML können wir CSS-Stile verwenden, um das Hintergrundbild von Elementen festzulegen. Und verwenden Sie das Attribut „background-repeat“, um zu steuern, wie sich das Hintergrundbild wiederholt. Bei der Einstellung „Keine Wiederholung“ kann der Effekt erzielt werden, dass sich Hintergrundbilder nicht wiederholen.

Zum Beispiel kann der folgende CSS-Stil das Hintergrundbild eines div-Elements auf „myimage.jpg“ setzen und es nicht wiederholt anzeigen:

div {
background-image: url(myimage.jpg);
background-repeat : no-repeat;
}

2. Verwenden Sie das onerror-Attribut des HTML-img-Tags

In HTML können wir das img-Tag verwenden, um Bilder anzuzeigen. Manchmal kann es vorkommen, dass das Bild nicht existiert oder nicht geladen werden kann. Zu diesem Zeitpunkt können wir das Attribut onerror verwenden, um eine alternative Bildadresse festzulegen, um sicherzustellen, dass die Seitenbilder nicht wiederholt werden.

Zum Beispiel kann das folgende img-Tag das falsche „image.jpg“ auf das Backup-Bild „backup.jpg“ verweisen:

3. Verwenden Sie JavaScript zur Implementierung

Wenn wir in Zukunft komplexere Logik benötigen, werden HTML und CSS unsere Anforderungen nicht erfüllen können. Zu diesem Zeitpunkt können wir JavaScript verwenden, um Bilder dynamisch zu laden und anzuzeigen, um eine flexiblere, nicht wiederholte Anzeige zu erreichen.

Der folgende JavaScript-Code erstellt beispielsweise zunächst ein Array mit allen Bildadressen, die angezeigt werden müssen. Anschließend durchläuft es das Array, wählt jedes Mal eine Bildadresse aus und vergleicht diese mit dem bereits angezeigten Array von Bildadressen, um sicherzustellen, dass keine Duplikate vorhanden sind. Abschließend wird die ausgewählte Bildadresse zum angezeigten Bildarray hinzugefügt und das Bild geladen und angezeigt.

var imgArray = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
var displayImgs = [];

function displayImgRandomly() {
do {

var imgIndex = Math.floor(Math.random() * imgArray.length);
var imgSrc = imgArray[imgIndex];

} while (displayedImgs.indexOf(imgSrc) !== -1);

displayedImgs.push(imgSrc);
var imgElement = document.createElement('img');
imgElement.src = imgSrc;
document.body.appendChild(imgElement);
}

Die oben genannten drei Methoden sind einfache und effektive Möglichkeiten, um eine nicht wiederholte Anzeige von Bildern zu erreichen. Die konkrete Umsetzung hängt von unseren Bedürfnissen und der tatsächlichen Situation ab. Durch die Verwendung grundlegender HTML- und CSS-Attribute, des onerror-Attributs des img-Tags und der flexiblen Funktionalität von JavaScript können wir effiziente und schöne, sich nicht wiederholende Bildanzeigeeffekte erzielen und so dem Webdesign visuelle Attraktivität und Interesse verleihen.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie die wiederholte Anzeige von Bildern in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!