网络图片延迟加载实现代码 超越jquery控件


Posted in Javascript onMarch 27, 2010

淘宝,QQ,还有当当,亚马逊之类网之类的都有这个效果,原理是分段加载图片,主要用于大型网站节省带宽,可是他们提供的东西压缩混淆看不清,还有的要基于什么雅虎的什么库,总之是很麻烦的,JQ的控件倒是够清晰了,只是还是没有达到节省网络带宽的效果,于是我在JQ懒加载控件上进行一些改进,改进以后的最大的特点就是调用方便,项目中不需要什么太多更改,而且JS文件也不大。(泡泡网工!转载注明出处,谢谢)
1.给泡泡网开发控件,本来想直接用JQ的延迟控件,但是JQ的延迟控件只是加快了加载速度,没有省带宽,也就是说JQ的懒加载并没有实际提升图片的传输量,本人讲不明白,还是请各位把代码DOWN了以后验收

{http://www.appelsiini.net/projects/lazyload 这个是原JQ控件的下载地址}
2.本控件用法要注意。
1.引用JQ:

<script src="js/jquery.js" type="text/javascript"></script>

JQ没有就去网上DOWN
2.把下面贴的代码保存为JS文件
<script src="js/MinmyLazyload.js" type="text/javascript"></script>

添加引用
3.调用语句,和JQ一摸一样,也可以而这样调用,记得是在页面底部,</BODY>标签之前调用


<script type="text/javascript">$("img").lazyload(); </script>

或者这样调用

<script type="text/javascript">$("img").lazyload({ placeholder: "images/blue-loading.gif", effect:"fadeIn" }); 
</script>

当然你得先有一张blue-loading.gif的图片,然后得在images文件夹下面才可以这样调用,

effect后面设置显示效果,默认是SHOW的效果,
4.前台的IMG标签里不要放SRC,请放入original标签。比如


这样就不会在页面一打开的时候加载图片了,也是最关键的地方,或者说是项目的后台代码里面唯一需要改动的地方。

有代码有真相
代码

(function($) { 
$.fn.lazyload = function(options) { 
var settings = { 
threshold: 0, 
failurelimit: 0, 
event: "scroll", 
effect: "show",//默认效果为show 
container: window 
}; 
if (options) { 
$.extend(settings, options); 
} 
var elements = this; 
if ("scroll" == settings.event) { 
$(settings.container).bind("scroll", function(event) { 
var counter = 0; 
elements.each(function() { 
if ($.abovethetop(this, settings) || 
$.leftofbegin(this, settings) 
) { 
self.loaded = false; 
} 
else if (!$.belowthefold(this, settings) && 
!$.rightoffold(this, settings)) { 
self.loaded = false; 
$(this).trigger("appear"); 
} 
else { 
self.loaded = true; 
if (counter++ > settings.failurelimit) { 
return false; 
} 
} 
}); 
var temp = $.grep(elements, function(element) { 
return !element.loaded; 
}); 
elements = $(temp); 
}); 
} 
/**三超控件--作品**/ 
this.each(function() { 
var self = this; 
if (settings.placeholder) { 
$(self).attr("src", settings.placeholder); 
} 
$(self).one("appear", function() { 
if (!this.loaded) { 
$("<img />") 
.bind("load", function() { 
$(self) 
.hide() 
.attr("src", $(self).attr("original")) 
[settings.effect](settings.effectspeed); 
self.loaded = true; 
}) 
.attr("src", $(self).attr("original")); 
}; 
}); 
if ("scroll" != settings.event) { 
$(self).bind(settings.event, function(event) { 
if (!self.loaded) { 
$(self).trigger("appear"); 
} 
}); 
} 
}); 
$(settings.container).trigger(settings.event); 
return this; 
}; 
$.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(); 
}; 
$.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); 
/**

貌似很难让人理解我在哪里优化了
先写清楚JQ地懒加载原理:
假设有10000张图片要在页面上显示,JQ的先一次性传送1W张图片到客户端,然后页面快速加载10张,
省下来了9990张图片的加载时间
我的控件原理:
先一次性传送10张图片到客户端,加载10张,
省下来了9990张图片的加载时间,
以及9990张图片的传送时间,这时候节省的网络流量是巨大的,
对大型网站来说,这些节省出的带宽可以干的事情就海了去了
也就是说我的控件第一次只是加载了1W个值为空的IMG标签,也就是一点点的字符串而已!
(IMG 标签里面的original属性不经过处理是不可能将服务器的图片下载到客户端上面去的!
但是如果用SRC标签图片绝对第一次就全部加载过去了,这个时候也就只能在页面加载速度上下功夫了)
不相信的可以用火狐浏览器查看图片请求,JQ控件绝对是一次传送完毕!)
顺便说一下我的测试JQ的方法
http://www.appelsiini.net/projects/lazyload/enabled.html 这个是JQ控件的测试地址,用火狐打开,打开firebug,然后监视图片的传输量,情况是一打开就把6张图片全部加载完毕,再拖动滚动条的时候,只是简单的执行加载功能,还是上图:
网络图片延迟加载实现代码 超越jquery控件
出处http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html
Javascript 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
JQuery的一些小应用收集
Mar 27 #Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 #Javascript
Jquery 滑入滑出效果实现代码
Mar 27 #Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 #Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 #Javascript
Javascript 函数中的参数使用分析
Mar 27 #Javascript
js几个验证函数代码
Mar 25 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
pycharm快捷键汇总
2020/02/14 Python
python搜索算法原理及实例讲解
2020/11/18 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
大学自我评价
2014/02/12 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
中学生英语演讲稿
2014/04/26 职场文书
交通志愿者活动总结
2014/06/27 职场文书
入学证明
2015/06/23 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书