Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um die Platzhalteranzeige zu implementieren, wenn das Bild nicht geladen ist

Verwenden Sie CSS, um die Platzhalteranzeige zu implementieren, wenn das Bild nicht geladen ist

小云云Original: 2018-03-19 17:37:234088Durchsuche

Durch die CSS-Steuerung wird beim Laden von Netzwerkbildern ein lokales Platzhalterbild angezeigt, bevor der Ladevorgang abgeschlossen ist, und das Netzwerkbild wird nach Abschluss des Ladevorgangs angezeigt

Prinzip: durch das After-Pseudoelement im img-Tag Fügen Sie ein Platzhalterbild hinzu und setzen Sie beide img auf position: relative; Nach dem Festlegen von position: absolute; ist die Quelle des img-Tags ein Netzwerkbild, da das Netzwerkbild nicht geladen wurde Der folgende Fall wird angezeigt. Das darin enthaltene js verzögert absichtlich das Festlegen des src-Attributs von img, um offensichtliche Effekte zu erzielen.

<!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>

Vorteile am Ende des Artikels:

Vorteil 1: Frontend, Java, Produktmanager, WeChat-Applet, Python und andere Ressourcensammlungen werden verschenkt: https:/ /www.jianshu.com/p /e8197d4d9880
Vorteil 2: Ein vollständiger Satz detaillierter Video-Tutorials zum Einstieg in die WeChat-Miniprogramme und zur praktischen Umsetzung: https://www.jianshu.com/p/e8197d4d9880

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um die Platzhalteranzeige zu implementieren, wenn das Bild nicht geladen ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Drei Möglichkeiten, Screenshots mit CSS zu erstellenNächster Artikel：Drei Möglichkeiten, Screenshots mit CSS zu erstellen

In Verbindung stehende Artikel

Mehr sehen