饥人谷_李栋
- 定义
- 图片懒加载
- 阶段实现
- 如何判断图片在可视范围
- 代码思路
- 封装
- 懒加载抽离
- 曝光去重
- 总结
一、定义
加载一个东西，不需要立刻加载，而是在需要的时候再加载
任何东西都可以实现 异步加载
二、图片的懒加载
当滚动窗口，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()来遍历元素的缓存
不知道功能怎么实现的时候，先大致的描述一下，这就是个函数
功能可以具体的写，具体的语义再用函数来实现
网友评论