css實現圖片未加載完成時佔位顯示

時間 2019-12-08

標籤 css 實現圖片加載完成時佔位顯示欄目 CSS 简体版

原文原文鏈接

經過css控制，能夠實現加載網絡圖片時，未加載完成的時候顯示本地一張佔位圖，加載完成後顯示網絡圖片；javascript

原理：經過在img標籤的after僞元素上添加一張佔位圖，而且img都設置爲position:relative;after設置position:absolute;img標籤的src爲網絡圖片，這樣加載的時候因爲網絡圖片沒加載完成，就會顯示本地圖片，下面案例中的js是爲了效果明顯而故意延時設置img的src屬性。css

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

</html>