网络图片延迟加载实现代码 超越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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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下判断网址是否有效的代码
2011/10/08 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php无序树实现方法
2015/07/28 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
更正确的asp冒泡排序
2007/05/24 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
详解vue高级特性
2020/06/09 Javascript
python @property的用法及含义全面解析
2018/02/01 Python
Python爬取成语接龙类网站
2018/10/19 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python post请求实现代码实例
2020/02/28 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
物资采购方案
2014/06/12 职场文书
个人党性分析总结
2015/03/05 职场文书
会计出纳岗位职责
2015/03/31 职场文书