Home > Article > Web Front-end > Example sharing of css implementation of placeholder display when the image is not loaded
Example sharing of css implementation of placeholder display when the image is not loaded
- 小云云Original
- 2018-03-19 17:37:234088browse
Through css control, when loading network images, a local placeholder image is displayed when the loading is not completed, and the network image is displayed after the loading is completed;
Principle: Through the after pseudo-element in the img tag Add a placeholder image, and set both img to position: relative; after setting position: absolute; the src of the img tag is a network image. When loading, because the network image has not been loaded, the local image will be displayed. The following case The js in it deliberately delays setting the src attribute of img for obvious effects.
<!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>Benefits at the end of the article:
Benefit 1: A collection of front-end, Java, product manager, WeChat applet, Python and other resources are given away: https://www.jianshu.com/p/e8197d4d9880
Benefit 2: A full set of detailed video tutorials on getting started with WeChat mini programs and in practice: https://www.jianshu.com/p/e8197d4d9880
The above is the detailed content of Example sharing of css implementation of placeholder display when the image is not loaded. For more information, please follow other related articles on the PHP Chinese website!