网页延迟加载js文件的3个方法
1、延迟加载JS代码
代码如下:
<script type="text/javascript" src="" id="my"></script>
<script type="text/javascript">
setTimeout("document.getElementById('my').src='http://www.geilijz.com + js.js'; ",3000);//延时3秒
</script>
这样通过延迟加载JS代码，给网页加载留出更多的时间！
2、JS最后加载方案一
在需要插入JS的地方插入以下代码:
<span id="L4EVER">LOADING…</span>
当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢。
然后在页面最底端插入以下代码:
<span id="AD_L4EVER">你的JS代码在这里!</span >
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>
3、让JS最后加载方案二
这个牵涉到网页的加载顺序问题，例如引入外部JS脚本文件时，如果放入html的head中,则页面加载前该JS脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行。
javascript的代码~~~ 所以我们可以把JS外部引入的文件放到页面底部，来让JS最后引入，从而加快页面加载。
7种js延时加载执行的方法
延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：
1. DOM
head append script tag
window.onload = function() {
setTimeout(function(){
// reference to <head>
var head = document.getElementsByTagName('head')[0];
// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "new.js";
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "new.png";
}, 1000);
};
2. document.write
<script language="javascript" type="text/javascript">
function include(script_filename) {
document.write('<' + 'script');
document.write(' language="javascript"');
document.write(' type="text/javascript"');
document.write(' src="' + script_filename + '">');
document.write('</' + 'script' + '>');
}
var which_script = '1.js';
include(which_script);
</script>
3. Iframe
和第一种类似，但是script tag是放到iframe的document里面。
window.onload = function() {
setTimeout(function(){
// create new iframe
var iframe = document.createElement('iframe');
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("name", "preload");
iframe.id = "preload";
iframe.src = "about:blank";
document.body.appendChild(iframe);
// gymnastics to get reference to the iframe document
iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;
var doc = iframe.document;
doc.open(); doc.writeln("<html><body></body></html>"); doc.close();
// create CSS
var css = doc.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css";
// create JS
var js = doc.createElement("script");
js.type = "text/javascript";
js.src = "new.js";
// preload CSS and JS
doc.body.appendChild(css);
doc.body.appendChild(js);
// preload IMG
new Image().src = "new.png";
}, 1000);
};
4. Iframe static page
直接把需要加载东西放到另一个页面中
window.onload = function() {
setTimeout(function(){
// create a new frame and point to the URL of the static
// page that has all components to preload
var iframe = document.createElement('iframe');
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("frameborder", "0");
iframe.src = "preloader.html";
document.body.appendChild(iframe);
}, 1000);
};
5. Ajax eval
用ajax下载代码，然后用eval执行
6. Ajax Injection
用ajax下载代码，建立一个空的script tag，设置text属性为下载的代码
7. async 属性(缺点是不能控制加载的顺序)
<script src="" async="true"/>
JS延迟加载机制函数(Lazyload)
最近应该大家都发现了，我的博客很多模块都使用了延迟加载技术。这个延迟加载(lazyload)我第一次听说其实还是不久前，那是在别人博客看到 介绍的一个基于jQuery的图片延迟加载插件。我对这个很感兴趣，其实很多网站也都应用了这个技术，尤其是大型网站，可以有效地减少服务器压力。
我原先觉得这个技术挺神秘的，实现起来应该比较困难，并且在网上也并没有找到相关的文章或者介绍。但是当我真正决定要去这样做时，却发现其实这个真的挺简单的，原理也容易理解。
lazyload，简单地说，就是在浏览器滚动到某个位置时再出发相关函数，实现页面元素的加载或者某些动作的执行。浏览器的滚动位置检测，可以通 过一个定时器来循环检测，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断需不要要执行函数。我将这个方法写成了一个类，我自己博客即是使用我 的这个方法。
（下面代码纯属自己的小试手，如果有不完善地方可以指出）
function Lazyload(func, obj) {//obj目标节点对象, func要触发的函数
this.func = func;
this.obj = obj;
this.it = setInterval(function() {//2s检查一次
this.checkScroll();
}.bind(this), 2000);//bind为setInterval绑定lazyload对象，否则this会指向window对象
}
Function.prototype.bind = function(obj) {//对象绑定
var __method = this;
return function() {
return __method.apply(obj, arguments);
};
}
Lazyload.prototype.checkScroll = function() {
var scrollY = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0,//页面滚动条高度
seeY = window.innerHeight||document.documentElement.clientHeight,//浏览器可视区域高度
func = this.func;
if (Math.abs(this.getY() - scrollY) < seeY) {//当目标节点进入可视区域，即页面滚动条高度减去节点距页面顶部距离小于浏览器可视高度
clearInterval(this.it);//清除定时器
return func();
}
}
Lazyload.prototype.getY=function(){//目标节点距页面顶部高度
var obj=this.obj;
tp = obj.offsetTop;
if (obj.offsetParent) while (obj = obj.offsetParent) tp += obj.offsetTop;
return tp;
}
关于代码的一些解释都在注释里了。如何使用呢？
使用这个方法要通过new来新建类对象的方法。参数func即是要触发的函数，obj即是页面上某个节点对象，即当此obj节点进入可视区域时（浏 览器滚动到此处）即触发func函数。比如，你要实现当浏览器滚动到页面上id为“test”的节点（b）时触发弹出窗口alert(‘yes’),可以 这么做
function a(){alert('yes');}//要出发的函数
var b=document.getElementById('tests');//获取页面节点
new Lazyload(a,b);//使用new关键字建立对象执行
以上就是我自己的lazyload的全部代码与实现方式了。当然，我相信它还有改进之处。
补充一些其他的东西：
我的代码中定时检测的时间设定是2s，也就是说每两秒去比较一次。如果你浏览器拖动太快，目标节点被很快的一闪而过，很可能此时就刚好没有执行 checkScroll函数，所以也就不会触发动作了。你可以将时间改为更小的值（在第6行），如500ms，可以避免大多数的快速拖动造成的问题。当 然，我觉得其实没必要，如果某人很快的拖动滚动条，说明他要浏览的东西在页面底部，那么其实是没必要加载他快速拖动过的节点的，所以2s我觉得是一个很合 理的值。
另外一个问题是我的代码是只触发出现在可视区域中的节点动作，如果你想要实现在当前浏览的页面以上部分的节点全部要加载，那么可以将代码的第20行去掉Math.abs即可。如果要实现在滚动到距目标节点一定高度时就开始触发函数，那么可将20行的seeY改为seeY+200(200即为设定的距离高度)。
关于lazyload的一个具体的实现，就还拿图片的延迟加载来说吧。你可以将图片的地址都改成一个默认的小图片（这个可以在后台用php直接修改 输出，也可以用js实现），将正真的图片地址存到图片的alt属性中（也可以指定一个自定义的属性），然后对每个图片绑定new lazyload，要触发的动作函数就是将alt中的值赋给src即可。这样，就实现了图片的lazyload（你就可以消灭jQuery，消灭 jQuery的lazyload插件了，也就消灭了那100来K的JS文件）。如果再结合ajax技术，那么也就可以实现如我博客一样的模块延迟加载了。