点击刷新
很常见的一个效果
虽然前端无法获知加载进度，但是可以通过效果来模拟
通过先拉大预览的小图将图片模糊，然后再加载大图模拟效果
效果预览：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>
© 著作权归作者所有
举报
发表评论
0/200
