网页延迟加载js文件的方法实例

网页延迟加载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技术,那么也就可以实现如我博客一样的模块延迟加载了。

时间: 2016-07-05

网页延迟加载js文件的方法实例的相关文章

ThinkPHP模版中导入CSS和JS文件的方法_php实例

本文实例讲述了ThinkPHP模版中导入CSS和JS文件的方法.分享给大家供大家参考.具体方法如下: 常用方法 1. css使用link 2. js使用src 用tp自己的导入标签import 导入Public文件夹下面的Js目录中的test.js文件,import标签可以省略type属性,默认就是js的文件 复制代码 代码如下: <import type='js' file='Js.test'> <import type='css' file='Css.test'> 不在Publ

jQuery解析XML文件同时动态增加js文件的方法

  本文实例讲述了jQuery解析XML文件同时动态增加js文件的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(function(){ $.ajax({ url: 'js/config/jsConfig.xml', dataType: 'xml', success: function(data){ $(data).find("moduleName").each(function(i,obj)

jQuery解析XML文件同时动态增加js文件的方法_jquery

本文实例讲述了jQuery解析XML文件同时动态增加js文件的方法.分享给大家供大家参考.具体实现方法如下: $(function(){ $.ajax({ url: 'js/config/jsConfig.xml', dataType: 'xml', success: function(data){ $(data).find("moduleName").each(function(i,obj) { var field = $(this); var funcName = field.at

jquery及js实现动态加载js文件的方法_javascript技巧

本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

xtemplate node.js 的使用方法实例解析_node.js

工程下安装XTemplate并使用它的方法实例说明: 1.安装xtpl 复制代码 代码如下: npm install xtpl xtemplate --save 2.在views目录添加test.xtpl文件,其内容为 this is {{title}}! 4.集成到Express中,只需要在app.js中,设置模板引擎即可 var print = require('./routes/print'); //此行代码放入app.js的require 声明代码段下边 app.set('view en

几种延迟加载JS代码的方法加快网页的访问速度_javascript技巧

本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/

jquery动态加载js三种方法实例

这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript("test.js");就OK了.   复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dt

php文件读取方法实例分析

  本文实例讲述了php文件读取方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 <?php $file = fopen("Test//file.txt", "r"); //打开文件 echo fgetc($file); //读取文件中的一个字符 fclose($file); //关闭文件 ?> ? 1 2 3 4 5 <?php $file = fopen("Test//file.txt", "r&qu

php文件读取方法实例分析_php技巧

本文实例讲述了php文件读取方法.分享给大家供大家参考.具体如下: <?php $file = fopen("Test//file.txt", "r"); //打开文件 echo fgetc($file); //读取文件中的一个字符 fclose($file); //关闭文件 ?> <?php $file = fopen("Test//file.txt", "r"); //打开文件 echo fgets($f