网络图片延迟加载实现代码 超越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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
node.js通过axios实现网络请求的方法
Mar 05 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模板函数 正则实现代码
2012/10/15 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
php面向对象重点知识分享
2019/09/27 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
Vue组件开发初探
2017/02/14 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2014年征兵标语
2014/06/20 职场文书
商场促销活动总结
2014/07/10 职场文书
护士个人总结范文
2015/02/13 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
白银帝国观后感
2015/06/17 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js