css实现图片未加载完成时占位显示
通过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实现图片未加载完成时占位显示的更多相关文章
- Selenium截屏 图片未加载的问题解决--【懒加载】
需求: 截屏后转PDF. 问题: selenium截屏后,图片未加载 如下图: 原因: 网站使用了懒加载技术:只有在浏览器中纵向滚动条滚动到指定的位置时,页面的元素才会被动态加载. 什么是图片懒加载? ...
- JQuery_图片未加载！
JQuery_图片未加载! <html> <head> <script type="text/javascript" src="/jquer ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- 微信小程地图片未加载成功的情况 Failed to load local image resource
在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...
- AngularJs 解决浏览器在初始化代码未加载完毕时 而出现闪烁的问题
1. ng-cloak; 因浏览器会先加载dom元素 而针对于{{pression}} 由于angularjs 还没加载完,会在页面出现闪烁 2.ng-bind; 用ng-bind代替{{expres ...
- 图片全部加载完成之后再显示页面ui，公司项目里用上，自己写的几行代码
说明: -----onload事件 这里我并没有考虑ie的兼容性 因为项目是移动端的: -----求大神指正~ -----自己测试正常 页面没加载完之前会有一个提示 /************** ...
- XE7 & FMX 那些年我们一起上过的控件：ListView 之 (3) 加载数据时如何显示自定义样式
本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...
- jquery-lazyload延迟加载图片 及 加载顺序 bug 修复
jquery-lazyload延迟加载图片 代码修改片段 function update() { var counter = 0; /**fix by weiyj start***/ elemen ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
随机推荐
- 洛谷 P1054 等价表达式
洛谷 P1054 等价表达式 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式, ...
- 【Codeforces Round #451 (Div. 2) B】Proper Nutrition
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以直接一层循环枚举. 也可以像我这样用一个数组来存y*b有哪些. 当然.感觉这样做写麻烦了.. [代码] /* 1.Shoud i ...
- 【2017 Multi-University Training Contest - Team 7】Hard challenge
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6127 [Description] 平面上有n个点,每个点有一个价值,每两个点之间都有一条线段,定义 ...
- 一个虐你千百遍的问题：“RPC好，还是RESTful好？”
看到知乎上有这样一个问题 WEB开发中,使用JSON-RPC好,还是RESTful API好? 还有其他优秀的推荐方案吗? -------------------------------------- ...
- windows下使用cpanm进行模块安装
windows下使用cpanm进行模块安装 要放假了,突然想整理一下手头上的软件,突然发现perl的安装模块这个功能不能用. 弄了一下,使得windows 下 perl 的 cpanm能用,避免成天为 ...
- php图像处理（thinkphp框架有相对强大的图像处理功能）
php图像处理(thinkphp框架有相对强大的图像处理功能) 一.总结 1.php处理图像:php处理图像需要安装外库(gd库) 2.gd库函数可以非常完美的操作图像:安装好库之后,这个库里面的函数 ...
- Linux 解压缩命令整理
一.tar命令 参数 参数 详解 参数 详解 -c 可以使用绝对路径来压缩 -x 解开一个压缩文件的参数指令 -t 查看内容 -r 向压缩归档文件末尾追加文件 -u 更新原压缩包中的文件 -z 有gz ...
- 为什么在AJAX里面直接return 一个值，接受不到？
1.AJAX是异步执行流程,后面的代码可能会先一步执行.把异步改为同步. 2.JS函数作用域问题,现在外面声明一个全局变量,等success后再把值给变量,这样就可以return 值了.
- JAVA 水题
纯粹是让我来掌握熟练度的. 1.金蝉素数 某古寺的一块石碑上依稀刻有一些神秘的自然数. 专家研究发现:这些数是由1,3,5,7,9 这5 个奇数字排列组成的5 位素数,且同时去掉它的最高位与最低位数字 ...
- python文件的操作
文件的操作,归根结底就只有两种:打开文件.操作文件 一.打开文件:文件句柄 = open('文件路径', '模式') python中打开文件有两种方式,即:open(...) 和 file(...) ...