经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,而是当用户拖动滚动条到了"娱乐" 这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。
其实tudou的实现原理很简单:
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接地址放到图片的alt属性中,看下tudou的代码:
<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);
上面代码不能直接运行,但分析这些代码,我们可以了解tudou实现图片延迟加载的原理,然后来实现它。
模拟实现代码如下:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
默认显示的图片:
<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>
不显示的图片:
<img width="120" height="90" style="border:1px solid red" class="lazyImg" alt="真实图片.jpg" src="空白图片.gif" />
<img width="120" height="90" style="border:1px solid red" class="lazyImg" alt="真实图片.jpg" src="空白图片.gif" />
<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>100){
// 滚动高度超过100px,加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
分享到:
相关推荐
滚动加载图片,延迟加载图片,简单的js,不需要理由。
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效...
这是一款有关网页图片延迟加载的小案例,主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看...
js页面图片延迟加载特效是一款仿淘宝商城商品页面图片延迟加载效果,滚动条滚动到图片时再执行加载,添加了一个渐现效果 js页面图片延迟加载特效图:
图片延迟加载: 拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。
很多网站首页打开比较慢,图片多,可以用这个延迟加载,图片会随滚动条,加载图片
ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: ...
jQuery实现的图片水平滑动延迟加载动画效果源码(自定义水平滚动条).zip
数据延迟加载功能的jQuery插件,类似新浪微博的滚动加载,当滚动条滚动到底部的时候,加载数据。使用方法: 加载jquery文件和DataLazyLoad文件。[removed][removed] [removed][removed] 根据选择器调用插件$("....
利用php+mysql+jquery实现了瀑布流布局,实现了大小不一的图片按照一定的规律方式排列。 另外实现了图片延迟加载的功能,点击浏览器下拉滚动条时才加载更多的内容。
js页面图片延迟加载特效是一款仿淘宝商城商品页面图片延迟加载效果,滚动条滚动到图片时再执行加载,添加了一个渐现效果 js页面图片延迟加载特效图:
HTML5_延迟加载图片的一个小插件scrollLoading的用法示例,当拖动网页滚动条的时候,剩下的内容才会加载进来,加载的瞬间显示Loading,目前这种应用比较普遍了。在手机端,特别是一些瀑布流效果图片展示中,需要显示...
2)、对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载,开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到...
获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 代码如下: <!DOCTYPE html> <html>...
里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。
通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。 使用lazy ...
ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery....
lazyload1.9.3,图片延迟随滚动条显示。$(function() { $("img.lazyload").lazyload()});