通过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 = '//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


领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

作者：喜欢坑队友的程序员
链接：https://www.jianshu.com/p/a5fd143c6184
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

css实现图片未加载完成时占位显示的更多相关文章

  1. Selenium截屏 图片未加载的问题解决--【懒加载】

    需求: 截屏后转PDF. 问题: selenium截屏后,图片未加载 如下图: 原因: 网站使用了懒加载技术:只有在浏览器中纵向滚动条滚动到指定的位置时,页面的元素才会被动态加载. 什么是图片懒加载? ...

  2. JQuery_图片未加载！

    JQuery_图片未加载! <html> <head> <script type="text/javascript" src="/jquer ...

  3. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  4. 微信小程地图片未加载成功的情况 Failed to load local image resource

    在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...

  5. AngularJs 解决浏览器在初始化代码未加载完毕时 而出现闪烁的问题

    1. ng-cloak; 因浏览器会先加载dom元素 而针对于{{pression}} 由于angularjs 还没加载完,会在页面出现闪烁 2.ng-bind; 用ng-bind代替{{expres ...

  6. 图片全部加载完成之后再显示页面ui，公司项目里用上，自己写的几行代码

    说明: -----onload事件   这里我并没有考虑ie的兼容性 因为项目是移动端的: -----求大神指正~ -----自己测试正常 页面没加载完之前会有一个提示 /************** ...

  7. XE7 & FMX 那些年我们一起上过的控件：ListView 之 (3) 加载数据时如何显示自定义样式

    本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...

  8. jquery-lazyload延迟加载图片 及 加载顺序 bug 修复

    jquery-lazyload延迟加载图片   代码修改片段 function update() { var counter = 0; /**fix by weiyj start***/ elemen ...

  9. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

随机推荐

  1. 理解宏的使用 extern

    如何定义一个全局变量在一个文件中,然后在其它文件中调用就行,而不需要多次extern外部声明. 由于之前的公司的程序中全局的变量使用得很多,在多个.C文件中会调用,不这样处理做的话就会多处进行exte ...

  2. NuGet 使用及dll管理

    NuGet学习笔记(1)——初识NuGet及快速安装使用 作者: 懒惰的肥兔  来源: 博客园  发布时间: 2012-05-20 21:33  阅读: 53168 次  推荐: 33   原文链接  ...

  3. 背景剪除和OpenCV中的实现

    转载请注明出处! ! ! http://blog.csdn.net/zhonghuan1992 背景剪除和OpenCV中的实现 背景与前景都是相对的概念.以快速公路为例:有时我们对快速公路上来来往往的 ...

  4. Linux下vi替换字符命令操作实例

    在Linux下的开发中,经常涉及到对文件里的字符进行处理,当中,对字符的替换操作也是非常的频繁. 本文以一个实际的文件为例,具体介绍了Linux下经常使用的vi替换字符命令,为相关的开发工作提供给了參 ...

  5. HDU 1848（sg博弈） Fibonacci again and again

    Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  6. 循环体（for/while）循环变量的设置

    1. 求滑动(移动)平均(moving average) double partialSum = 0; for (int i = 0; i < M-1; ++i) partialSum += A ...

  7. mysql 获取自增id的值的方法

    原生jdbc方式: Statement.getGeneratedKeys() 示例: Statement stmt = null; ResultSet rs = null; try { // // C ...

  8. [selenium]-处理滚动条

    转载于:https://blog.csdn.net/lilongsy/article/details/76142497 1.先把driver 强制转换为js,如下 JavascriptExecutor ...

  9. 【2017中国大学生程序设计竞赛 - 网络选拔赛 hdu 6150】Vertex Cover

    [链接]点击打开链接 [题意] 有人写了一个最小点覆盖的贪心算法,然后,让你去hack它. 并且,要求这个算法得到的错误答案,是正确答案的三倍. 让你任意输出hack数据,点数<=500 [题解 ...

  10. 以流的形式接收Http请求

    IEnumerable<ReportObject> IHttpReceiveReport.OnPost(System.Web.HttpContextBase context) { //[{ ...