一、echo.js：

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

1、在页面中需要引入echo.css和echo.min.js

2、对需要进行延迟加载的图片采用如下写法：

3、对插件进行初始化：

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

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

　　data-echo指向的是真正的图片地址。非常简单，这样的话图片只有出现在视野内时才会加载，减少了页面的渲染工作量。

二、jquery.lazyload.js：

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

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，并且最好是给予初始高宽占位，以免影响布局。