懒加载课堂笔记

Posted 2020-10-07 问海螺吧

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()来遍历元素的缓存
  不知道功能怎么实现的时候，先大致的描述一下，这就是个函数
  功能可以具体的写，具体的语义再用函数来实现