跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

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

这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。 实现: 其实tudou的实现原理很简单, 1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码: 复制代码 代码如下: 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() 能看的见到图片:
一开始看不到的图片:
把上面代码copy到本地运行下就可以看到效果了。 您可能感兴趣的文章: 原生Js页面滚动延迟加载图片实现原理及过程 图片延迟加载的实现代码(模仿懒惰) jquery图片延迟加载 前端开发技能必备系列 jquery 插件实现图片延迟加载效果代码 js图片延迟加载的实现方法及思路

相关文章