延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）

Posted 2020-08-17 衣冠小禽兽

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加载隐藏图片
//图片加载时的事件 (Function)，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload的参数）      
      appear: function(num,setting){
          console.log("一开始还剩"+num+"张未加载")
      },
//图片加载后的事件 (Function)，有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()的方法没怎么用到，有兴趣的码友可以去试一下~