recherche

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

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

小云云
小云云original
2018-03-19 17:37:234094parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Trois façons de prendre des captures d'écran avec CSSArticle suivant：Trois façons de prendre des captures d'écran avec CSS

Articles Liés

Voir plus