浅谈tudou土豆网首页图片延迟加载的效果


Posted in Javascript onJune 23, 2010

这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。
实现:
其实tudou的实现原理很简单,
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码:

<a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/"> 
<img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> 
</a>

2. 绑定window.scroll事件,在该事件里面的重设所有class为lazyImg的图片的src值,在土豆首页找到如下JS:
var o=function(){ 
var s=TUI.pos.scrollTop(),q=c; 
if(q.box[0]){ 
var r=q.box.offset().top; 
if(r-s>0&&r-TUI.pos.windowHeight()<s){ 
q.init() 
}else{ 
q.stop() 
} 
} 
if(!h||s<590){return true} 
TUI.widget.quickPlaylist.load(); 
h=false 
}; 
o(); 
$(window).bind("scroll",o);

我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。
实例:
上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
</head> 
<body> 
能看的见到图片:<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/> <div id="lazyBox" style="margin-top:100px;"> 
一开始看不到的图片: 
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> 
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/> 
</div> 
<div style="height:1000px;"> 
  
</div> 
<script type="text/javascript"> 
var hasShow = false; 
$(window).bind("scroll",function(){ 
if(hasShow==true){ 
$(window).unbind("scroll"); 
return; 
} 
var t = $(document).scrollTop(); 
if(t>50){ 
// 滚动高度超过50,加载图片 
hasShow = true; 
$("#lazyBox .lazyImg").each(function(){ 
$(this).attr("src",$(this).attr("alt")); 
}); 
} 
}); 
</script> 
</body> 
</html>

把上面代码copy到本地运行下就可以看到效果了。
Javascript 相关文章推荐
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
javascript实现画板功能
Apr 12 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
有道JavaScript监听浏览器的问题
Jun 23 #Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 #Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 #Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 #Javascript
jquery tab插件制作实现代码
Jun 22 #Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
You might like
memcache命令启动参数中文解释
2014/01/13 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
幼儿园教师节活动方案
2014/02/02 职场文书
保健品市场营销方案
2014/03/31 职场文书
暑假家长评语大全
2014/04/17 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python