Utilisez CSS pour implémenter l'affichage d'un espace réservé lorsque l'image n'est pas chargée. Exemple de partage.-tutoriel CSS-php.cn

Utilisez CSS pour implémenter l'affichage d'un espace réservé lorsque l'image n'est pas chargée. Exemple de partage.

小云云

Libérer： 2018-03-19 17:37:23

original

4098 Les gens l'ont consulté

Grâce au contrôle CSS, lors du chargement des images réseau, une image d'espace réservé local est affichée avant la fin du chargement, et l'image réseau est affichée une fois le chargement terminé

Principe : via le pseudo-élément after dans le fichier ; balise img Ajoutez une image d'espace réservé et définissez les deux img sur position : relative ; après avoir défini position : absolue ; le src de la balise img est une image réseau lors du chargement, car l'image réseau n'a pas été chargée, l'image locale sera. affiché. Le cas suivant Le js qu'il contient retarde délibérément la définition de l'attribut src de img pour des effets évidents.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {            position: relative;
        }        
        img::after {            content: "";            height: 100%;            width: 100%;            position: absolute;            left: 0;            top: 0;            background: url(iphonex.png ) no-repeat center;
        }    </style></head><body>
    <img src=""></body><script>
    setTimeout(function() {        document.querySelectorAll("img")[0].src = &#39;http://upload-images.jianshu.io/upload_images/7450593-65067eb4cf76d882.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240&#39;;
    }, 3000);</script></html>

Copier après la connexion

Avantages à la fin de l'article :

Avantage 1 : Front-end, Java, chef de produit, applet WeChat, Python et d'autres collections de ressources sont offertes : https:/ /www.jianshu.com/p /e8197d4d9880
Avantage 2 : un ensemble complet de didacticiels vidéo détaillés sur la prise en main des mini-programmes WeChat et leur mise en œuvre pratique : https://www.jianshu.com/p/e8197d4d9880

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!