4.图片加载从模糊到清晰

很常见的一个效果
虽然前端无法获知加载进度,但是可以通过效果来模拟

通过先拉大预览的小图将图片模糊,然后再加载大图模拟效果

效果预览:https://codepen.io/andy-js/pen/dyPZvJW

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>andy-js:图片加载从模糊到清晰</title>
<style>
*{margin:0;padding:0;}
#box{width:1223px;height:688px}
#img{position:absolute;top:0;left:0;opacity:0;}
</style>
</head>

<body>

<div id="box">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=104412215,2753702561&fm=26&gp=0.jpg" width="1223" height="688" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578044512150&di=de5b0116de9aae66d69d751392878484&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb58f8c5494eef01ff772eac9e1fe9925bc317d5c.jpg" onload="fn(this)" id="img" width="1223" height="688" />
</div>
<script>
function fn(oImg){
    var n=0;
    var timer=setInterval(function(){
        n++;
        oImg.style.opacity=n/100;
        if(n>=100)
        {
            clearInterval(timer);
        };     
    },30);
};
</script>
</body>
</html>
Image placeholder
andy
未设置
  79人点赞

没有讨论,发表一下自己的看法吧

推荐文章
软件架构被高估,清晰简单的设计被低估

软件架构最佳实践、企业架构模式以及系统描述的正式方法都是非常重要且实用的工具,总会有合适的场景让它们发挥作用。但在设计系统时,请从简单始、以简单终,尽可能避免一切会无谓提高复杂度的架构与正式工具。

清晰架构(Clean Architecture)的Go微服务: 日志管理

良好的日志记录可以提供丰富的日志数据,便于在调试时发现问题,从而大大提高编码效率。记录器提供的自动化信息越多越好,日志信息也需要以简洁的方式呈现,便于找到重要的数据。日志需求: 无需修改业务代码即可切

UfqiNews有福新闻的第N+1批次更新:清晰,流畅,省电

UfqiNews有福新闻自推出以来,一直持续更新、优化升级,作为一款带来全新新闻阅读体验的资讯应用,已经日益成熟,浏览量也日渐攀升。近日针对UfqiNews有福新闻的升级改进包括如下方面。1.UI调整

JanusGraph索引入门及模糊查询

JanusGraph模糊查询与索引1.索引JanusGraph支持两种不同类型的索引来加快查询处理:图形索引和中心顶点索引 图形索引使从由其属性标识的顶点或边列表开始遍历的全局检索操作在大型图形上高效

jquery如何判断图片是否加载完成?

对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用loading的gif图表示正在加载中。一、普通方法监听i

css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

GORM 中文文档_3.5. 预加载

预加载 db.Preload("Orders").Find(&users) ////SELECT*FROMusers; ////SELECT*FROMordersWHEREuser_idIN(1,2,

html怎么加载css?

有四种加载方式:行内式通过html的style属性实现,如下所示//写在body标签中 行内式嵌入式在style标签中写css样式,在body中引用//写在style标签中的css样式 p{ colo

wordpress无法加载css

wordpress无法加载css出现这种情况是因为wordpress安装时用http://localhost访问来安装,局域网访问时,加载css的路径不对,所以会出现css无法加载,只显示文字。解决方

thinkphp加载不了css样式怎么解决

thinkphp加载不了css样式怎么解决解决方法:1、项目入口文件index.php

thinkphp加载不了css怎么办?

thinkphp加载不了css怎么办?如何解决?解决方法:1、项目入口文件index.php

ie加载不了css的原因是什么?

可能原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8)。2.CSS文件中未指定@charset头声明,导致IE默认使用页面编码来解码CSS文件(DEMO中IE浏览

无法加载css是什么原因?

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。有时会出现无法加载css样式的情况,例如:当我们打开网页时,网页布局完整,但却没有任

ie怎么加载不了css样式?

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。ie怎么加载不了css样式?IE一直是特殊的一个浏览器,有时,会出现无法加载css样

CSS小图标不加载问题

CSS小图标不加载问题css小图标不加载的原因:●文件引入不全●css样式丢失(类名填写错误、css文件路径错误)解决方法:1、首先将需要的图标下载下来以下是iconfont下载的图标目录2、将ico

服务器不加载css样式表

服务器不加载css样式表的原因:●HTML文件中,引用css样式表的路径填写错误导致的。●nginx做代理后的虚拟路径和静态资源的请求路径不一致导致的。●样式文件编码和网页编码不一致,导致不能解析cs

php中css不加载怎么解决?

php中css不加载怎么解决?解决方法:1、首先打开HTML文档;2、然后在head标签中找到引入css文件的link标签;3、最后在link标签的href属性的值前面,加上__STATIC__即可。

ie加载不出css样式的原因有哪些?

ie加载不出css样式的原因有哪些?可能的原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8);2.CSS文件中未指定@charset头声明,导致IE默认使用页面编

iis不加载css怎么办?

iis不加载css怎么办?解决方法:打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容选中后安装即可。

https无法加载css js资源怎么办?

https无法加载cssjs资源怎么办?在https的网站中引用http路径的js或css会导致不起作用,其形如:解决办法:将http:去掉,改为浏览器默认是不允许在HTTPS里面引用HTTP资源的,

ie6加载不了css怎么解决?

ie6加载不了css怎么解决?IE6不加载css文件,是因为css文件的编码不正确,使用记事本创建的css文件,默认编码时ANSI,这种情况下在其他浏览器下CSS样式会正常显示,但IE6及以下版本就不

ant-design-vue按需加载出错怎么办?

ant-design-vue按需加载出错怎么办?按照官方文档引入antd时,到了按需加载那步出错了,提示errorin./node_modules/ant-design-vue/es/style/in

app.vue组件如何按需加载?

app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的is属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

先加载css还是js?

先加载css还是js?先加载css,后加载js。因为css加载会阻塞浏览器渲染,为了打开网页白屏时间缩短,会优先选择加载css;后加载js是因为js中可能会修改dom元素,js加载会阻塞浏览器解析ht

判断是否加载了jquery?

判断是否加载了jquery?当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法:方法1:if(jQuery){ //jQuery已加载