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:234111Durchsuche
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 = 'http://upload-images.jianshu.io/upload_images/7450593-65067eb4cf76d882.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240';
}, 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!