<!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; 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>