前端插件实现图片懒加载

1、echo.js：

　　咱们在开发页面的时候确定会遇到图片比较多的时候，虽然咱们可能有图片分布式的服务器，可是在客户端仍是会有很大的性能开销。为了用户体验，特别是对首屏加载速度要求很高的，一般咱们会考虑图片延时加载，lazyloading这款插件已经能很好地实现这一功能，但是是基于jQuery，对于移动端可能不太实用。一个很是简单实用叫echo的插件，3k左右特别适合移动端使用。步骤以下：

一、在页面中须要引入echo.css和echo.min.js

二、对须要进行延迟加载的图片采用以下写法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" /> 

三、对插件进行初始化：

echo.init({ 　　offset:1,        //离可视区域多少像素的图片能够被加载
　　throttle:1      //图片延迟多少毫秒加载
});

　　说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，固然，可使用外部样式对多张图片统一控制大小。

　　data-echo指向的是真正的图片地址。很是简单，这样的话图片只有出如今视野内时才会加载，减小了页面的渲染工做量。

2、jquery.lazyload.js：

　　将页面里全部img属性src属性用data-xx代替，当页面滚动直至此图片出如今可视区域时，用js取到该图片的data-xx的值赋给src。

<section class="module-section" id="container">
     <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
</section>

require.config({ baseUrl : "/static", paths: { jquery:'component/jquery/jquery-3.1.0.min' jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
 }, shim: { jqueryLazyload: { deps: ['jquery'], exports: '$' } } });

require( [ 'jquery', 'jqueryLazyload' ], function($){ $(document).ready(function() { $("img.lazy-load").lazyload({ 　　　　　　　　effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
　　　　　　　　threshold : 180, //预加载，在图片距离屏幕180px时提早载入
　　　　　　　　event: 'click',  // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
　　　　　　　　container: $("#container"), // 指定对某容器中的图片实现效果
　　　　　　　　failure_limit：2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则再也不继续加载,
但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的状况
　　　　　　}); 　　　　}); 　　});

　　为了代码可读性，属性值我都写好了注释。值得注意的是预制图片属性为data-original，而且最好是给予初始高宽占位，以避免影响布局。