首頁 >web前端 >css教學 >css實作圖片未載入完成時佔位顯示實例分享

css實作圖片未載入完成時佔位顯示實例分享

小云云原創: 2018-03-19 17:37:234118瀏覽

透過css控制，可以實現載入網路圖片時，未載入完成的時候顯示本地一張佔位圖，載入完成後顯示網路圖片；

原理：透過在img標籤的after偽元素上新增一張佔位圖，並且img都設定為position:relative;after設定position:absolute;img標籤的src為網路圖片，這樣載入的時候由於網路圖片沒載入完成，就會顯示本地圖片，下面案例中的js是為了效果明顯而故意延時設定img的src屬性。

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

文末福利：

福利一：前端，Java，產品經理，微信小程序，Python等資源合集大放異彩：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程式入門與實戰全套詳細影片教學：https://www.jianshu.com/p/e8197d4d9880

以上是css實作圖片未載入完成時佔位顯示實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：三種CSS截圖的方法下一篇：三種CSS截圖的方法

看更多