js模糊图渐变至清晰大图,提升用户体验度
1、很简单的实现,代码有详细注释。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="http://121.199.20.86/dw/res/js/jquery-1.7.1.min.js"></script> <title>title</title> </head> <body> <img src="http://121.199.20.86/dw/file/download/aa200680-6b65-4481-a00b-0dcaee068778.thumbs.png" class="dishImg" id="dishImg"/> </body> <style> img{width:80%;margin-left:10%;} </style> <script type="text/javascript"> $(document).ready(function(){ setlazyload(); }); //模糊图片渐变至清晰大图,提升体验度 function setlazyload(){ var img = new Image(); img.src = "http://121.199.20.86/dw/file/download/aa200680-6b65-4481-a00b-0dcaee068778.png";//大图 img.onload = function() { document.getElementById('dishImg').src = this.src; } } </script> </html>
若在你电脑上不能显示该效果,可能是以下两个原因:
1、自己重新导入jquery.js库
2、自己重新导入一大一小两张网络图片,宽高等比例。