Tag Archives: lazyload

文章列表：
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
图片延迟加载 II – 实现延迟加载
图片延迟加载 III – 优化

通过前2篇博客《图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置》、《图片延迟加载 II – 实现延迟加载》，我们已经能够完成图片延迟加载的功能，但遗留了一个问题–性能。

因为绑定了onscorll事件，所以试想一下，我们拉着滚动条往下看网页，每次滚动一点距离就需要对整个数组进行一次循环，并且判断哪些图片需要加载，这是一件非常消耗CPU的工作。你可以打开任务管理器，查看拖动滚动条时的CPU负载程度。

如何减负

目前我能想到的有3点：
1. 每加载一张图片，就将图片从数组中剔除
2. 设置退出机制。当数组为空时取消绑定的onscroll和onresize事件
3. onscroll事件可以用setTimeout代替，同样设置退出机制。

演示页面：点击此处
源码下载：点击此处
(more…)

文章列表：
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
图片延迟加载 II – 实现延迟加载
图片延迟加载 III – 优化

前一篇博客，我们为“图片延迟加载”做了一些准备工作，
我们知道了如何判断图片出现在视窗中，以便我们来加载这张图片。

这次我们可以正式开工，来完成延迟加载的功能了，具体的流程大概是这样的：
1. 将需要延迟加载图片的src属性替换成一张临时图片，如一张灰度图片grey.gif
2. 将真正的图片路径写在img的其他属性中，比如：tsrc
3.1 页面加载后逐个获取这些img，并且计算他们的位置，将结果保存在数组中。
3.2 页面加载后，获取窗口的初始化大小和位置。
3.3 计算初次哪些图片需要加载
4. 检测视窗的resize，发生时重新计算windowSize和windowOffset
5. 检测页面的scrolling，发生时从数组中对比，加载符合条件的img

演示页面
代码下载
(more…)

文章列表：
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
图片延迟加载 II – 实现延迟加载
图片延迟加载 III – 优化

最近很多网站都加载了“图片延迟加载”的功能，大多都是用jQuery实现的，但我偏偏对这东西不太感冒，我更关心如何用原生JS去实现。

“图片延迟加载”实际上应该称为“按需求加载”，即页面在打开之初并不将所有图片都显示出来，而仅仅显示浏览器中能看到的部分；随着浏览器滚动条的移动，当那些未显示的图片出现在浏览器中时，才去加载这些图片。

延迟加载涉及到比较多的知识，因本人水平有限，所以一边摸索一边将感悟发上来分享。

如何实现？

按照我的理解，最关键的步骤是要能判断出图片是否出现时浏览器的视窗中。
这里有个视窗的概念：
视窗就是浏览器中可视部分，就相当于在页面中开了一个洞。
通过滚动条（横向或纵向），我们可以调整视窗在页面中的位置，来显示页面的内容。
如右图中，白色部分就是视窗，它覆盖在整个页面之上，就是我们看到的部分。

演示页面
代码下载

如何判断图片出现在视窗中？

视窗相对于页面，会有一个偏移量，这个偏移量就是滚动条滚动了多少距离
图片相对于页面，也会有个偏移量，这个偏移量就是图片相对于页面的绝对坐标。
我们需要取得这2个偏移量，加上视窗的大小与图片大小后进行对比。

(more…)