浅谈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 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
taro开发微信小程序的实践
May 21 Javascript
Javascript实现简易天数计算器
May 18 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
smarty的保留变量问题
2008/10/23 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
python学习必备知识汇总
2017/09/08 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
深入浅析Python传值与传址
2018/07/10 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
专科文秘应届生求职信
2013/11/18 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
工厂车间标语
2014/06/19 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2014会计年终工作总结
2014/12/20 职场文书
测量员岗位职责
2015/02/14 职场文书
八年级数学教学反思
2016/02/17 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL