cari

Rumah  >  Artikel  >  hujung hadapan web  >  css实现图片未加载完成时占位显示实例分享

css实现图片未加载完成时占位显示实例分享

小云云
小云云asal
2018-03-19 17:37:234094semak imbas

通过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




Atas ialah kandungan terperinci css实现图片未加载完成时占位显示实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：三种CSS截图的方法 Artikel seterusnya：用CSS实现Tab页切换效果的示例代码_CSS教程_CSS_网页制作

Artikel berkaitan

Lihat lagi