1、什么是懒加载?javascript
对未出如今视野范围内的图片先不进行加载,等到出如今视野范围才去加载。前端
2、为何使用懒加载?java
懒加载的主要目的是做为服务器前端的优化,减小请求数或延迟请求数。jquery
理论性知识你们都有本身的获取渠道,很少说,下面看具体内容服务器
引入js文件 jquery.lazyload.js测试
<script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/lazyload/jquery.lazyload.js"></script>
HTML页面优化
<img class="lazy imgShow" src="{$val.sharingimg}" width="50px;">
<script> $(document).ready(function(){ $("img.lazy").lazyload({ effect : "fadeIn", failurelimit : 3 //failurelimit : 10 在找到10张不在可视范围内的图片时中止执行 }); }); </script>
测试spa
打开Google Chrome Network选项 Slow 3Gcode
看下个人测试结果blog
一、打开页面 看下加载的内容
二、下拉后,对比下
以上就是所有内容,若有错误,还请指正,谢谢。