使用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>

 

转载于:https://www.cnblogs.com/010101-/p/10649026.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/249255.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数学符号历史

数学符号历史

https://baike.baidu.com/item/%E6%95%B0%E5%AD%A6%E7%AC%A6%E5%8F%B7/685756?fraladdin
阅读更多...
POJ2828 Buy Ticket

POJ2828 Buy Ticket

传送门 题目大意&#xff1a;给一段空序列&#xff0c;每次向序列中某一个位置插入一个数&#xff0c;插入的位置后面所有数相应后移。 这个题比较令人头疼的是后移操作&#xff0c;我们不可能大面积后移。那怎么办呢&#xff1f;后面的人对前面有影响&#xff0c;那我们能不能…
阅读更多...
vue从入门到精通之进阶篇（四）模块化工具 webpack

vue从入门到精通之进阶篇（四）模块化工具 webpack

模块化 webpack命令 npm init -y npm install webpack3.6.0 --save-dev --registry https://registry.npm.taobao.orgpackage.json文件 "scripts": { "test": "webpack ./main.js ./build.js" },命令行运行 npm run test ES6模块 导入和导出只…
阅读更多...
微观经济学

微观经济学

chapter1 导论 学经济学有啥用&#xff1f;找工作有用吗&#xff1f;没有用&#xff0c;但是当你失业的时候你就知道为什么了。为什么会有经济学&#xff1f;资源的稀缺性导致的问题&#xff01; 1.1.稀缺性 既定的资源无法满足人们的欲望。稀缺性存在于任何地方&#xff0c;产…
阅读更多...
树结构

树结构

https://baike.baidu.com/item/%E6%A0%91%E7%BB%93%E6%9E%84/3399688?fraladdin
阅读更多...
C#事务提交

C#事务提交

using (System.Transactions.TransactionScope transcope new System.Transactions.TransactionScope()) { //code something transcope.Complete(); }转载于:https://www.cnblogs.com/WuHZ/p/9797373.html
阅读更多...
vue从入门到精通之进阶篇（五）脚手架vue-cli

vue从入门到精通之进阶篇（五）脚手架vue-cli

vue-cli2.x脚手架的使用 参考链接&#xff1a;https://github.com/vuejs/vue-cli/tree/v2#vue-cli-- 安装&#xff1a; npm install -g vue-cli用法&#xff1a; $ vue init < template-name > < project-name >例&#xff1a; $ vue init webpack my-projec…
阅读更多...
ES6 数值的扩展

ES6 数值的扩展

ES6 规范了二进制和八进制的表示方法&#xff0c;代码如下&#xff1a; console.log(0o2000 1024) //true 使用0o表示八进制 0是数字0 o是小写字母oconsole.log(0b10000000000 1024) //true 使用0b表示二进制 0是数字…
阅读更多...
树的定义

树的定义

https://www.cnblogs.com/jpfss/p/10842521.html
阅读更多...
【Java】 剑指offer(27) 二叉树的镜像

【Java】 剑指offer(27) 二叉树的镜像

本文参考自《剑指offer》一书&#xff0c;代码采用Java语言。 更多&#xff1a;《剑指Offer》Java实现合集 题目　 请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 思路 画图可以很清晰地得到思路&#xff1a;先前序遍历&#xff0c;对每个结点交…
阅读更多...
vue从入门到精通之进阶篇（一）vue-router：导航守卫

vue从入门到精通之进阶篇（一）vue-router：导航守卫

vue-router的导航守卫之在导航完成后获取数据 需求&#xff1a;在导航完成之后加载数据。渲染DOM <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title> </head> <body><di…
阅读更多...
Unity 新手入门 如何理解协程 IEnumerator yield

Unity 新手入门 如何理解协程 IEnumerator yield

Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分&#xff0c;前半部分是通俗解释一下Unity中的协程&#xff0c;后半部分讲讲C#的IEnumerator迭代器 协程是什么&#xff0c;能干什么&#xff1f; 为了能通俗的解释&#xff0c;我们先用一个简单的例子来看看协程可以…
阅读更多...
百万级数据库优化方案

百万级数据库优化方案

一、百万级数据库优化方案 1.对查询进行优化&#xff0c;要尽量避免全表扫描&#xff0c;首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where 子句中对字段进行 null 值判断&#xff0c;否则将导致引擎放弃使用索引而进行全表扫描&#xff0c;如&#…
阅读更多...
vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信

vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信

$emit和$on进行组件之间的传值 注意&#xff1a;emit和emit和emit和on的事件必须在一个公共的实例上&#xff0c;才能够触发 需求&#xff1a; ​ 1.有A&#xff0c;B&#xff0c;C三个组件&#xff0c;同时挂载到入口组件中 ​ 2.将A组件中的数据传递到C组件&#xff0c;再将…
阅读更多...
树结构的性质

树结构的性质

非空树的结点总数等于树种所有结点的度之和加 1度为 K 的非空树的第 i 层最多有 ki-1 个结点(i > 1)深度为 h 的 k 叉树最多有(kh - 1)/(k - 1)个结点具有 n 个结点的 k 叉树的最小深度为 logk(n(k-1)1))
阅读更多...
EM算法 小结

EM算法 小结

猴子吃果冻 博客园首页新随笔联系管理订阅随笔- 35 文章- 0 评论- 3 4-EM算法原理及利用EM求解GMM参数过程 1.极大似然估计 原理&#xff1a;假设在一个罐子中放着许多白球和黑球&#xff0c;并假定已经知道两种球的数目之比为1:3但是不知道那种颜色的球多。如果用放回抽样方…
阅读更多...
Vue UI 框架对比 element VS iview

Vue UI 框架对比 element VS iview

element VS iview (最近项目UI框架在选型 &#xff0c;做了个分析&#xff0c; 不带有任何利益相关&#xff09; 主要从以下几个方面来做对比 使用率&#xff08;npm 平均下载频率&#xff0c;组件数量&#xff0c;star, issue…) API风格 打包优化 与设计师友好性 1&a…
阅读更多...
SPSS-回归分析

SPSS-回归分析

回归分析&#xff08;一元线性回归分析、多元线性回归分析、非线性回归分析、曲线估计、时间序列的曲线估计、含虚拟自变量的回归分析以及逻辑回归分析&#xff09; 回归分析中&#xff0c;一般首先绘制自变量和因变量间的散点图&#xff0c;然后通过数据在散点图中的分布特点选…
阅读更多...
Python教程：Python中的for 语句

Python教程：Python中的for 语句

Python 中的 for 语句与你在 C 或 Pascal 中可能用到的有所不同。 Python教程 中的 for 语句并不总是对算术递增的数值进行迭代&#xff08;如同 Pascal&#xff09;&#xff0c;或是给予用户定义迭代步骤和暂停条件的能力&#xff08;如同 C&#xff09;&#xff0c;而是对任意…
阅读更多...
二叉树的基本性质及证明

二叉树的基本性质及证明

性质1&#xff1a;一棵非空二叉树的第i层上最多有2^(i-1)个结点&#xff0c;&#xff08;i>1&#xff09;。 性质2&#xff1a;一棵深度为k的二叉树中&#xff0c;最多具有2^k-1个结点&#xff0c;最少有k个结点。 性质3&#xff1a;对于一棵非空的二叉树&#xff0c;度为…
阅读更多...
最新文章

Copyright @ 2022~2023