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

用到的是延时加载技术，大概思路就是减少页面的<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            });        }                

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

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

js 的延时加载