网络图片延迟加载实现代码 超越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 document.createDocumentFragment()
Apr 04 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
javascript的BOM汇总
Jul 16 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
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中创建图像并绘制文字的例子
2014/11/19 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
php输出形式实例整理
2020/05/05 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
JS表的模拟方法
2015/02/05 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python给图像添加噪声具体操作
2019/03/03 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
公司开业庆典主持词
2014/03/21 职场文书
学习型党组织心得体会
2014/09/12 职场文书
六一儿童节开幕词
2015/01/29 职场文书
讲座通知范文
2015/04/23 职场文书
解约证明模板
2015/06/19 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技