<!DOCTYPE html>
<html>
<head>
<title>大图片加载从模糊到清晰</title>
</head>
<body style="text-align:center">
<h3>大图片加载从模糊到清晰</h3>
<div class="mark" style=\'background-image:url(http://img.neweb.top/20181110.jpg);background-size:100%;
filter: blur(4px);transition: all 0.7s;width: 800px;height: 450px;margin-left: 350px;\'>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 为了看到效果加个延时
setTimeout(function(){
// 若图片URL失效请自行替换
var imgUrl = \'http://img.neweb.top/20181110.jpg\';
var imgObject = new Image();
imgObject.src = imgUrl;
imgObject.onload = function(){
$(\'.mark\').css({
backgroundImage: \'url(\'+imgUrl+\')\',
filter: \'blur(0)\'
});
}
}, 1000)
</script>
</body>
</html>