延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
js里一说到延迟加载，大都离不开两种情形，即外部Js文件的延迟加载，以及网页图片的延迟加载：
1.首先简单说一下js文件的3种延迟加载方式：
(1)<script type=”text/javascript” defer>，defer属性可以推迟对脚本的解释，直到文档已经显示给用户为止，但只有IE支持defer属性
(2)设置具体的延迟时间，对应的js代码如下：
function loadScript(){ var myScript=document.createElement("script"); myScript.src="dafu.js"; document.body.appendChild(myScript); } setTimeout(function(){ loadScript(); },1000)
(3)采用js监听，直到文档加载完才会加载指定的外部js文件，对应的js代码如下：
if (window.addEventListener){ window.addEventListener("load", loadScript, false); }else if (window.attachEvent){ window.attachEvent("onload", loadScript); }else { window.onload = loadScript; }
2.接下来针对图片的延迟加载，说一下自己用过的两款不错的插件：
(1)基于jquery类库的jquery.lazyload.js(1.9+)，废话不多说，直接上代码，先上布局：
<div class="demo" style="width: 736px; margin:1000px auto;"> <img class="lazy" src="images/blank.gif" data-original="images/big-1.jpg"> <img class="lazy" src="images/blank.gif" data-original="images/big-2.jpg"> <img class="lazy" src="images/blank.gif" data-original="images/big-3.jpg"> <img class="lazy" src="images/blank.gif" data-original="images/big-4.jpg"> <img class="lazy" src="images/blank.gif" data-original="images/big-5.jpg"> <img class="lazy" src="images/blank.gif" data-original="images/big-6.jpg"> <img class="lazy" src="images/blank.gif" data-original="images/big-7.jpg"> </div>
注意，css样式里面我是给的.demo img { width: 100%; height: 490px;}，这样给图片添加width和height属性有助于在图片未加载时占满所需要的空间；另外，在src属性中设置占位图片，例如1x1像素的灰色图片或者loading的gift动图，然后在data-original中设置真实的图片URL，当然src中设置嫌麻烦可以去实例化的参数设置中写。
然后就是js部分的代码：
$("img").lazyload({
placeholder:"images/loading.gif", //设定一个占位图片,待图片加载时,占位图则会隐藏，优先调用标签行内属性src对应的占位图
data_attribute:"original", //真实图片地址的data属性后缀，默认为original
effect:"fadeIn", //默认地使用show()方法来将图显示出来，还可以使用其他特效(fadeIn,slideDown)来处理
threshold:40, //默认情况下图片会出现在屏幕时加载，threshold可令图片在距离屏幕多少像素时提前加载，做到不让用户察觉
effectspeed:500,//作为effect的参数使用表示动画时间，默认为undefined
// event:"click", //默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置才开始加载图片，这里可以设置成某个事件触发加载(click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…))
// container: $("#container"), //默认在拉动浏览器滚动条时生效，这里可以将插件用在可滚动容器的图片上
failure_limit:10, //默认在找到第一张不在可见区域里的图片时则不再继续加载，但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况，failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
// skip_invisible:false //默认忽略了隐藏图片. 将skip_invisible设为false加载隐藏图片
//图片加载时的事件，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload的参数）
appear: function(num,setting){
console.log("一开始还剩"+num+"张未加载")
},
//图片加载后的事件，有2个参数，同appear
load: function(num,setting){
console.log("接着还剩"+num+"张未加载")
}
});
//页面加载完成5秒后, 指定区域内的图片会自动进行加载
$(window).on("load", function() {
setTimeout(function() {$("img").trigger("click")}, 5000);
});
//监听每张图片加载完毕
$("img").on("load",function(){
console.log("刚加载的这张图片的下标是"+$(this).index());
})
大部分功能都能实现，感觉不太好的就是不能直接给图片设置明确的延迟加载时间，详细介绍请移步http://code.ciaoca.com/jquery/lazyload/。
(2)轻量级插件echo.js，脱离jquery类库，还能直接设置明确的延迟加载时间，html部分的代码和上面有一些类似：
<div class="demo" style="width: 736px; margin:1000px auto;"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg"> </div>
注意：如果直接自定义一张占位图片，可能会造成图片的变形等，这里可以先准备一张1*1px透明gif图片(blank.gif)，然后用一个loading图片作背景，即.demo img { width: 100%; height: 490px; background: url(images/loading.gif) no-repeat 50%;}
然后直接上js部分的代码：
//实例化echo echo.init({ offset:0,//设置上下左右距离viewport到多少就开始加载图片，默认为0，即只加载出现在可视区中的图片，参数取值越大，加载的图片就会越多 // offsetVertical:40,//垂直方向距离viewport多少就开始加载图片，默认值为0 // offsetHorizontal:0,//水平方向距离viewport多少就开始加载图片，默认值为0 // offsetTop:0, //顶部方向距离viewport多少就开始加载图片，默认值为offsetVertical // offsetButton:0, //底部方向距离viewport多少就开始加载图片，默认值为offsetVertical // offsetLeft:0, //左边方向距离viewport多少就开始加载图片，默认值为offsetHorizontal // offsetRight:0, //右边方向距离viewport多少就开始加载图片，默认值为ooffsetHorizontal throttle:1000,//设置图片延迟加载时间 callback: function (element, op) { if(op === 'load') { element.classList.add('loaded'); } else { element.classList.remove('loaded'); } console.log(element, 'has been', op + 'ed')//传递已更新的元素和操作（load或者unload） }, unload:false//默认为false，即当图片滑动超过了viewport的时候不在加载已经加载过的图片 }); //监听每张图片加载完毕 $("img").on("load",function(){ console.log($(this).index()); })
主要功能都测试过，没有明显的问题，还有个echo.reader()的方法没怎么用到，有兴趣的码友可以去试一下~
