网络图片延迟加载实现代码 超越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 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
用文本作数据处理
2006/10/09 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
详解微信UnionID作用
2019/05/15 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python编程的核心知识点总结
2021/02/08 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
毕业生求职信
2014/06/10 职场文书
关爱留守儿童标语
2014/06/18 职场文书
读群众路线的心得体会
2014/09/03 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python