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

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

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

透過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