http://www.jianshu.com/p/29edd52a8e03

懒加载课堂笔记

作者 饥人谷_李栋 关注

2015.12.30 14:28* 字数 1005 阅读 402评论 5喜欢 7赞赏 1

饥人谷_李栋

1. 定义
2. 图片懒加载
3. 阶段实现
4. 如何判断图片在可视范围
5. 代码思路
6. 封装
7. 懒加载抽离
8. 曝光去重
9. 总结

一、定义

加载一个东西，不需要立刻加载，而是在需要的时候再加载
任何东西都可以实现 异步加载

二、图片的懒加载

当滚动窗口，DOM元素出现在面前的时候，在加载(曝光加载)

阶段实现：

1.用最普通、古老的方式实现懒加载
2.简单封装 或者写成Jquery的插件
3.把懒加载抽离出来，变成曝光组件，不仅仅是图片的懒加载，任何东西都可以实现懒加载
4.继续完善组件

图片的懒加载

img src="b lank.png" data-src="xxx1"
img src="b lank.png" data-src="xxx2"
...
img src="b lank.png" data-src="xxxn"

• 可以先加载空白图片，用来占位
• 真实的图片地址 放在data-src里面
• 当图片出现在窗口上(可视范围内)的时候，用data-src属性来替换src属性

xxx.attr("src",xxx.attr("data-src"))

• 自定义的属性用data开头 如 data-src=""
  //可以用简单的方法去获取data...

如何判断图片在可视范围呢

图片是个长长的画布，浏览器窗口就相当于一个相框，页面就相当于一张的纸
当你滚动的时候，相当于这张纸在后面抽动

参数1：滚动的高度
    $(".content").offset().top
参数2：当前元素到这张纸顶端的高度
    $(window).scrollTop()
参数3：窗口的高度
    $(window).height()

临界点：参数1 = 参数2+参数3
可视范围内，即：参数1 < 参数2+参数3

代码思路

• 默认情况下，图片是不显示的，只显示空白图
• 函数包裹：判断图片是否在可视范围内，如果是，则显示图片
• 具体的语义判断函数
• 由于可视范围判断会用到滚动，需要在开头加滚动监听
• 曝光去重

代码友情链接嘿嘿

封装

//可以隔离命名空间

//把模块写成对象，所有成员放到对象里面，会暴露所有模块成员
var LazyImg={
init:function(){},
xx :function(){},
...
}
LazyImg.init($("img"))

当然 可以做成Jquery plugin

$.fn.LazyImg=function(){
...
}
$("img").LazyImg()

为了改良第一种封装方法，使用了自动执行函数包裹,好处就是不暴露私有成员

var LazyImg=(function(){
  var x1=function(){}
  var x2=function(){}
    return{
    x1:x1，
    x2:x2
    }
})("img")

懒加载抽离

//懒加载不仅仅是图片需要
把显示图片这个动作的函数抽离出来，在封装调用是传递进去
当然传别的函数，就可以其他DOM元素的懒加载

曝光去重

1.页面加载完成之后，不再做再次加载DOM元素的动作
2.当滚动停止后，执行动作

轮播-懒加载实现

开始的时候，只有第一张有图片，整个轮播都没有启动
当你页面加载完成之后，轮播组件启动，开始滚动
每滚一次 ，看图片存不存在，再去加载这个图片
当说有图片都加载完成之后，就自动开始轮播

定义一个数组，里面的数据都是从后台传过来的，一些图片的地址，
可以用循环，加一个setinteval，把里面的地址一个个的替换src，
这样，用户会看到图片换来换去，也可以实现轮播

• $(xxx)得到的是一个类数组
  //用id来选择$("#xxx")也可以，只不过数组里面只有一个元素而已
• 可以用each()来遍历元素的缓存
  不知道功能怎么实现的时候，先大致的描述一下，这就是个函数
  功能可以具体的写，具体的语义再用函数来实现