首页 > 代码库 > 前端性能优化技术（一）：图片懒加载
前端性能优化技术（一）：图片懒加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lazyload</title></head><body> <div> <a href="http://www.mamicode.com/#"><img class="lazy" src="http://www.mamicode.com/images/placeholder.gif" data-original="images/5.jpg" height="640" height="480"></a> <a href="http://www.mamicode.com/#"><img class="lazy" src="http://www.mamicode.com/images/placeholder.gif" data-original="images/6.jpg" height="640" height="480"></a> <a href="http://www.mamicode.com/#"><img class="lazy" src="http://www.mamicode.com/images/placeholder.gif" data-original="images/7.jpg" height="640" height="480"></a> <a href="http://www.mamicode.com/#"><img class="lazy" src="http://www.mamicode.com/images/placeholder.gif" data-original="images/8.jpg" height="640" height="480"></a> </div></body><script src="http://www.mamicode.com/js/jquery.js"></script><script src="http://www.mamicode.com/js/jquery.lazyload.js"></script><script type="text/javascript"> $(function() { $("img.lazy").lazyload({ effect : "fadeIn", }); });</script></html>
使用步骤：
1、引入jquery库、版本需求需要按照实际情况
2、这里必须设置图片的width和height,否则插件可能无法正常工作。
3、img的src 放置loading图标，data-original放置图片的真实路径。
使用图片懒加载的好处：
1、减轻服务器压力。
2、提高用户的体验。
前端性能优化技术（一）：图片懒加载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。