修改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 add event remove event
Apr 07 Javascript
javascript jQuery插件练习
Dec 24 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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执行速度全攻略(下)
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
php中namespace及use用法分析
2016/12/06 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
西安兵马俑导游词
2015/02/02 职场文书
工作收入证明范本
2015/06/12 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python