通过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. 【AIM Tech Round 4 (Div. 1) B】Interactive LowerBound

    [链接]http://codeforces.com/contest/843/problem/B [题意] 给你一个数组模拟的单链表,放在一个长度为n的数组里面,然后告诉你表头的位置在哪里; 你可以最多 ...

  2. COGS——C2098. Asm.Def的病毒

    http://www.cogs.pro/cogs/problem/problem.php?pid=2098 ★☆   输入文件:asm_virus.in   输出文件:asm_virus.out    ...

  3. Swift iOS tableView static cell动态计算高度

    TableView是iOS开发中经常使用的组件.有些表格由于UILabel包括的文本字数不一样,须要显示的高度也会不同,因此须要动态计算static cell的高度.我用的是static cell,注 ...

  4. Excel Add-in

    Excel Add-in 前言 这个系列文章应该有一阵子没有更新了,原因是一如既往的多,但是根本所在是我对于某些章节其实还没有完全想好怎么写,尤其是对于Office Add-in这块 —— 到底是要每 ...

  5. Altium Designer如何统一调整标号大小,在pcb环境下

  6. POJ 3187 Backward Digit Sums 枚举水~

    POJ 3187  Backward Digit Sums http://poj.org/problem?id=3187 题目大意: 给你一个原始的数字序列: 3   1   2   4  他可以相邻 ...

  7. POJ 3264 Balanced Lineup 线段树RMQ

    http://poj.org/problem?id=3264 题目大意: 给定N个数,还有Q个询问,求每个询问中给定的区间[a,b]中最大值和最小值之差. 思路: 依旧是线段树水题~ #include ...

  8. Surging Demo 项目之一

    原文:Surging Demo 项目之一 开发与运行环境 IDE Visual Stadio 2017/Visual Stadio 2019 Visual Stadio Core Docker 和 D ...

  9. 在scala中调用java代码

      详细代码请见https://github.com/lujinhong/scalademo 在scala中调用java代替非常非常简单,直接调用即可 (一)一个简单示例 1.创建一个java类 pa ...

  10. 英特尔投资：7200万美元投资12家创新公司，包括3家中国公司（www.intelcapital.com）

    集微网消息,英特尔投资——英特尔公司全球投资机构,今天在英特尔投资全球峰会上宣布向12家科技创业公司投资超过7200万美元.加上今天宣布的新投资,英特尔投资在2018年投资总额已超过1.15亿美元. ...