js 的延时加载

最近，由于项目中引用到的脚本比较多，页面首次加载速度有些慢，于是进行了一些优化

用到的是延时加载技术，大概思路就是减少页面的<script>标签，并依靠lazyload.js延时加载相应的脚本文件。

首先，要先引用lazyload.js ，这是一个老外写的脚本，我放到了公司的图片服务器上，大家可以直接访问  http://img.fang.com/rent/image/rent/js/lazyload.js

实践之前，先来看一下它的使用文档

// Load a single JavaScript file and execute a callback when it finishes.
LazyLoad.js('http://example.com/foo.js', function () {
  alert('foo.js has been loaded');
});

// Load multiple JS files and execute a callback when they've all finished.
LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
  alert('all files have been loaded');
});

// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
  alert(arg);
}, 'foo.css has been loaded');

// Load a CSS file and execute the callback in a different scope.
LazyLoad.css('foo.css', function () {
  alert(this.foo); // displays 'bar'
}, null, {foo: 'bar'});

可以看到，它同时支持js、css的延时加载。并且，还能一次加载多个文件。
下面是我自己定义的返回js路径的方法

// 用于返回延时加载的js路径
        function getJSUrls() {
            var version = '<%=FileVision %>';
            var mapimgurl = '<%=MapImgUrl %>';return [               
                mapimgurl + '/SearchResultNew.js?v=' + version,
                mapimgurl + '/suggestionnew.js?v=' + version,
                mapimgurl + '/jquery.zclip.min.js?v=' + version,               
                mapimgurl + '/ZUMAP.js?v=' + version,
                mapimgurl + '/common.js?v=' + version
            ];
        }

mapimgurl是图片服务器的某一目录，这里设置成变量便于统一管理。getJSUrls方法返回的是一个字符串数组，正好可以对应文档中给出的第二种方法。

得到路径之后，开始加载

     // 延迟加载
        (function () {
            LazyLoad.js(getJSUrls(), function () {
              // do something
            });
        } ())

   

这里的得到getJSUrls返回的数组，还可以换一种方式处理

        var urls = getJSUrls();        
        for (var i = 0; i < urls.length; ++i) {
          LazyLoad.js(urls[i], function(){
                // do something
            });
        }                

这样是一个一个的加载，可以根据情况加上一些判断。

这只是一个小小的尝试，具体能优化多少，其实我也不知道。新手还在学习中，大家共勉～