Comment empêcher l'affichage répété d'images en HTML

Dans la conception Web, nous devons souvent afficher plusieurs images sur la page, mais nous devons parfois empêcher que ces images ne s'affichent de manière répétée. Dans ce cas, nous pouvons utiliser certains attributs et techniques du HTML pour y parvenir. Cet article explique comment empêcher l'affichage répété d'images en HTML.

1. Utilisez l'attribut background du CSS

En HTML, nous pouvons utiliser les styles CSS pour définir l'image d'arrière-plan des éléments. Et utilisez l'attribut background-repeat pour contrôler la façon dont l'image d'arrière-plan se répète. S'il est défini sur non-répétition, l'effet d'images d'arrière-plan non répétitives peut être obtenu.

Par exemple, le style CSS suivant peut définir l'image d'arrière-plan d'un élément div sur "myimage.jpg" et ne pas l'afficher de manière répétée :

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

2. Utilisez l'attribut onerror de la balise HTML img#🎜🎜 ##🎜 🎜#En HTML, on peut utiliser la balise img pour afficher des images. Parfois, nous pouvons rencontrer une situation dans laquelle l'image n'existe pas ou ne peut pas être chargée. À ce stade, nous pouvons utiliser l'attribut onerror pour définir une autre adresse d'image afin de garantir que les images de la page ne sont pas répétées.

Par exemple, la balise img suivante peut pointer le mauvais "image.jpg" vers l'image de sauvegarde "backup.jpg" :

3. Utilisez JavaScript pour implémenter

Si nous avons besoin d'une logique plus complexe à l'avenir , HTML et CSS Il ne peut plus répondre à nos besoins. À l'heure actuelle, nous pouvons utiliser JavaScript pour charger et afficher dynamiquement des images afin d'obtenir un affichage non répété plus flexible.

Par exemple, le code JavaScript suivant crée d'abord un tableau contenant toutes les adresses d'images qui doivent être affichées. Il parcourt ensuite le tableau, sélectionnant à chaque fois une adresse d'image, et la compare au tableau d'adresses d'image déjà affiché pour s'assurer qu'il n'y a pas de doublons. Enfin, l'adresse de l'image sélectionnée est ajoutée au tableau d'images affiché, et l'image est chargée et affichée.

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

Les trois méthodes ci-dessus sont des moyens simples et efficaces pour obtenir un affichage non répété d'images. La mise en œuvre spécifique dépend de nos besoins et de notre situation réelle. En utilisant les attributs HTML et CSS de base, l'attribut onerror de la balise img et la fonctionnalité flexible de JavaScript, nous pouvons obtenir des effets d'affichage d'images non répétitifs efficaces et esthétiques, ajoutant ainsi un attrait visuel et un intérêt à la conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!