修改jquery.lazyload.js实现页面延迟载入


Posted in Javascript onDecember 22, 2010

虽然实现了延迟载入的视觉效果,但是通过httpwatch等工具就可以看到,页面载入完毕后又发布很多空请求,而空请求就是由这些被替换过的img标签产生的,空请求也会一定程度上增加页面的打开时间,所以jquery.lazyload.js并未真生的实现页面延迟载入。
我对jquery.lazyload.js做了一些修改,实现了页面的延迟载入,不仅仅是图片,html代码同样可以延迟载入,大大减少了页面发出的请求数,提高了页面的打开速度。
修改后的jquery.lazyload.js代码如下:
jquery.lazyload.js

/* 
* Lazy Load - jQuery plugin for lazy loading images 
* 
* Copyright (c) 2007-2009 Mika Tuupola 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Project home: 
* http://www.appelsiini.net/projects/lazyload 
* 
* Version: 1.5.0 
* 
* Modify by @cnbaiying 
* Modify time: 2010-12-16 
*/ 
(function($) { 
$.fn.lazyload = function(options) { 
var settings = { 
threshold : 0, //阀值 
failurelimit : 0, 
event : "scroll", 
effect : "show", 
container : window 
}; 
if(options) { 
$.extend(settings, options); 
} 
/* Fire one scroll event per scroll. Not one scroll event per image. */ 
var elements = this; 
if ("scroll" == settings.event) { 
$(settings.container).bind("scroll", function(event) { 
var counter = 0; 
elements.each(function() { 
if ($.abovethetop($(this).parent(), settings) || $.leftofbegin($(this).parent(), settings)) { 
/* Nothing. */ 
} else if (!$.belowthefold($(this).parent(), settings) && !$.rightoffold($(this).parent(), settings)) { 
$(this).trigger("appear"); 
} else { 
if (counter++ > settings.failurelimit) { 
return false; 
} 
} 
}); 
/* Remove image from array so it is not looped next time. */ 
var temp = $.grep(elements, function(element) { 
return !element.loaded; 
}); 
elements = $(temp); 
}); 
} 
this.each(function() { 
var self = this; 
/* When appear is triggered load original image. */ 
$(self).one("appear", function() { 
if (!this.loaded) { 
//alert($(self).parent().html($(self).html())); 
var tmp_str = $(self).html(); 
tmp_str = tmp_str.replace("<", "<"); 
tmp_str = tmp_str.replace(">", ">"); 
$(self).parent().append(tmp_str); 
self.loaded = true; 
} 
}); 
/* When wanted event is triggered load original image */ 
/* by triggering appear. */ 
if ("scroll" != settings.event) { 
$(self).bind(settings.event, function(event) { 
if (!self.loaded) { 
$(self).trigger("appear"); 
} 
}); 
} 
}); 
/* Force initial check if images should appear. */ 
$(settings.container).trigger(settings.event); 
return this; 
}; 
/* Convenience methods in jQuery namespace. */ 
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */ 
$.belowthefold = function(element, settings) { 
if (settings.container === undefined || settings.container === window) { 
var fold = $(window).height() + $(window).scrollTop(); 
} else { 
var fold = $(settings.container).offset().top + $(settings.container).height(); 
} 
return fold <= $(element).offset().top - settings.threshold; 
}; 
$.rightoffold = function(element, settings) { 
if (settings.container === undefined || settings.container === window) { 
var fold = $(window).width() + $(window).scrollLeft(); 
} else { 
var fold = $(settings.container).offset().left + $(settings.container).width(); 
} 
return fold <= $(element).offset().left - settings.threshold; 
}; 
$.abovethetop = function(element, settings) { 
if (settings.container === undefined || settings.container === window) { 
var fold = $(window).scrollTop(); 
} else { 
var fold = $(settings.container).offset().top; 
} 
return fold >= $(element).offset().top + settings.threshold + $(element).height(); 
}; 
$.leftofbegin = function(element, settings) { 
if (settings.container === undefined || settings.container === window) { 
var fold = $(window).scrollLeft(); 
} else { 
var fold = $(settings.container).offset().left; 
} 
return fold >= $(element).offset().left + settings.threshold + $(element).width(); 
}; 
/* Custom selectors for your convenience. */ 
/* Use as $("img:below-the-fold").something() */ 
$.extend($.expr[':'], { 
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", 
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", 
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", 
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" 
}); 
})(jQuery);

下面是测试页面的html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="汽车图片,汽车图片壁纸, 汽车图片桌面, 汽车图片库,汽车图片大全" /> 
<meta name="description" content="汽车图片,网上车市汽车图片大全频道为网友提供各种汽车图片及美女图片下载,各种车型汽车图片桌面,汽车图片壁纸,车展美女图片,美女车模图片等。精彩图片,尽在网上车市。" /> 
<title>【汽车图片|汽车美女图片-汽车图片大全】-网上车市</title> 
<style> 
.switch_textarea {display:none;} 
.div_style {width:600px; height:400px; } 
</style> 
<script type="text/javascript" src="jquery.1.4.4.js"></script> 
<script type="text/javascript" src="lazyload.jquery.js"></script> 
<script> 
$().ready(function(){ 
$(".switch_textarea").lazyload(); 
}); 
</script> 
</head> 
<body> 
<H2>第1张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd2385fd03.jpg" /></textarea></div> 
<H2>第2张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd2366adec.jpg" /></textarea></div> 
<H2>第3张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd233b8da4.jpg" /></textarea></div> 
<H2>第4张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd231a0fd8.jpg" /></textarea></div> 
<H2>第5张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd22e68f56.jpg" /></textarea></div> 
<H2>第6张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd22c55a5d.jpg" /></textarea></div> 
<H2>第7张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd2278872b.jpg" /></textarea></div> 
<H2>第8张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd224a0f6e.jpg" /></textarea></div> 
<H2>第9张图</H2> 
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd21fb42bc.jpg" /></textarea></div> 
</body> 
</html>

测试页面的html代码中将所有要载入的图片都放到了textarea标签中,其目的就是防止页面载入时这些img标签向服务器发出请求,从而实现减少不必要的请求数,实际应用中也可以将不需第一次载入的html代码放到textarea中。
Javascript 相关文章推荐
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 #Javascript
Jquery截取中文字符串的实现代码
Dec 22 #Javascript
jquery里的each使用方法详解
Dec 22 #Javascript
jQuery学习笔记之jQuery的动画
Dec 22 #Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python删除文件示例分享
2014/01/28 Python
Python算法之栈(stack)的实现
2014/08/18 Python
使用Python读取大文件的方法
2018/02/11 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
演讲稿格式
2014/04/30 职场文书
2015年超市工作总结
2015/04/09 职场文书
无罪辩护词范文
2015/05/21 职场文书
小爸爸观后感
2015/06/15 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL