js函数的延迟加载实现代码

代码如下:

//非延迟加载的函数，每次调用都会进行条件判断
function removeHandler(target,eventType,handler) {
if(target.removeEventListener) {
target.removeEventListener(eventType,handler,false);
}else {
target.detachEvent("on"+eventType,handler);
}
}
//延迟加载的函数，第一次调用后，会覆盖原来的老函数，以后再次调用的是新函数，不会再进行条件的判断，提升效率
function addHandler(target,eventType,handler) {
if(target.addEventListener) {
addHandler = function(target,eventType,handler){
target.addEventListener(eventType,handler,false);
}
}else{
addHandler = function(target,eventType,handler){
target.attachEvent("on"+eventType,handler);
}
}
addHandler(target,eventType,handler);
}

//条件预加载
//条件预加载确保所有函数调用时间相同。其代价是在脚本加载时进行检测。预加载适用于一个函数马上就会被用到,而且在整个页面生命周期中经常使用的场合。

var addEventHandler = document.body.addEventListener ? function(target,eventType,handler) {
target.addEventListener(eventType,handler,false);
} : function(target,eventType,handler) {
target.attachEvent("on"+eventType,handler);
}

赞 (0)

相关推荐

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • 原生Js页面滚动延迟加载图片实现原理及过程

    原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

  • 浅析js预加载/延迟加载

    Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制 Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这

  • js 延迟加载 改变JS的位置加快网页加载速度

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

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

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

  • js实现延迟加载的方法

    本文实例讲述了js实现延迟加载的方法.分享给大家供大家参考.具体分析如下: setTimeout('yourFunction()',5000); //5秒后执行yourFunction(),只执行一次 setInterval('yourFunction()',5000); //每隔5秒执行一次u 如果在yourFunction()中再次调用了setTimeout('yourFunction()',5000),可以完成类似于 setInterval('yourFunction()',5000)的功

  • JS延迟加载加快页面打开速度示例代码

    第一,JS延迟加载 代码如下: 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script language="JavaScript"> setTimeout("document.getElementById('my').src='include/...文件...php'; ",300

  • js函数的延迟加载实现代码

    复制代码 代码如下: //非延迟加载的函数,每次调用都会进行条件判断 function removeHandler(target,eventType,handler) { if(target.removeEventListener) { target.removeEventListener(eventType,handler,false); }else { target.detachEvent("on"+eventType,handler); } } //延迟加载的函数,第一次调用后,

  • 怎么通过onclick事件获取js函数返回值（代码少）

    具体过程不做详细叙述,直接上代码: 写一个弹出框,绑定onclick事件是好像控制不了它的返回值.代码如下 function createBtn(){ for(var i = 0; i < _this.btn.length; i++){ var btn = document.createElement('span'); btn.id = 'btn_' + i; btn.innerHTML = _this.btn[i]; btn.style.padding = '5px 15px'; btn.st

  • js函数排序的实例代码

    复制代码 代码如下: var as = [1,2,11,3434,3,4545,33,55,0];as.sort(); //这个排序是按照字典排序//自定义按照数字排序function sortByNum(a,b){return parseInt(a) - parseInt(b);}as.sort(sortByNum);//按照对象来排序//定义一个person对象function Person(name.age){this.name=name;this.age=age;}var p1 = ne

  • JS函数验证总结(方便js客户端输入验证)

    复制代码 代码如下: <script language="JavaScript"> var test = new Array("", "a1_", "abcdef", "abcde123", "ads23%", "aA1B2^&2"); for(var i in test) { alert(test[i] + " 的密码强度为"

  • web项目开发之JS函数防抖与节流示例代码

    web项目开发之JS函数防抖与节流示例代码

    目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

  • iframe子父页面调用js函数示例

    1.iframe子页面调用父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 子页面取父页面中的标签中的值,比如该标签的id为"test",则: 复制代码 代码如下: window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document).c

  • 工作中常用的js、jquery自定义扩展函数代码片段汇总

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]);

  • 深入理解js函数的作用域与this指向

    函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi

  • 解决js函数闭包内存泄露问题的办法

    本文通过举例,由浅入深的讲解了解决js函数闭包内存泄露问题的办法,分享给大家供大家参考,具体内容如下 原始代码: function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ return outer.color };

随机推荐