透過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 = 'http://upload-images.jianshu.io/upload_images/7450593-65067eb4cf76d882.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'; }, 3000);</script></html>
福利一:前端,Java,產品經理,微信小程序,Python等資源合集大放異彩:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程式入門與實戰全套詳細影片教學:https://www.jianshu.com/p/e8197d4d9880
以上是css實作圖片未載入完成時佔位顯示實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!