纯javascript实现图片延时加载方法

近期看到了一篇博客，其中提到了土豆网的图片采用了延迟加载技术。这种技术的原理在于，当页面上有大量内容时，页面可见区域以下的图片会先不加载，只有当用户向下滚动到图片位置时，才会进行加载。这样做的好处在于能够减少服务器向用户浏览器发送图片文件所产生的负荷，只加载用户需要看的图片。

我在整理以往写过的插件时，偶然想起了这项技术。现如今，像淘宝、京东等购物网站的首页越来越丰富多样，首页的重要性不言而喻。最近我在参与一家银行的网站项目时深有体会，只有占据首页的位置，才能吸引更多的关注。为了平息业务人员对于首页位置的争夺，我们采取了各种策略。其中，为了优化用户体验和提高页面加载速度，我们采用了延迟加载技术。通过缩小图片大小甚至采用上述技术来减轻服务器压力的满足业务需求。如此一来，页面内容更丰富且不会因过多的图片加载而影响用户体验。这种技术可以应用于长页面的优化，特别是当页面内容较多时，可以有效提高页面的加载速度和用户体验。

懒加载图片功能的实现之旅

我们设定了一些初始变量，包括用于存储元素映射的map_element，元素对象数组element_obj等。我们还有一个初始化函数initVar()，用于设置文档主体和文档元素对象，以及需要懒加载的标签类型。初始化元素映射的函数initElementMap()，则负责遍历所有标签元素，并依据它们距离页面顶部的位置进行分组存储。下载监听函数initDownloadListen()，则负责处理滚动事件，并根据视口的高度来触发图片的加载。我们还定义了获取元素距离顶部高度的函数getAbsoluteTop()，以及用于启动懒加载功能的函数init()。下面，我们逐一看下这些函数的细节。

小伙伴的滚动加载图片实现之旅

在网页开发中，随着页面的不断扩展，为了提高页面加载速度和用户体验，我们常常采用一种称为懒加载（Lazy Loading）的技术。其中，通过滚动屏幕来动态加载图片是一种常见的实现方式。让我们深入了解一位小伙伴是如何实现的。

我们需要一个标志变量 `temp` 来判断用户是向下滚动还是向上滚动。当页面滚动时，会触发 `window.onscroll` 事件。在此事件中，我们首先获取页面上所有的 `` 标签元素，并筛选出带有 "lazy" 类名的图片元素，将它们存储在一个数组中。

随着用户的滚动，当某个带有 "lazy" 类名的图片进入可视区域时，我们将执行一个操作：将图片的 `src` 属性值替换为其 `alt` 属性值，从而实现图片的懒加载。将图片的类名从 "lazy" 更改为 "notlazy"，表示该图片已经加载完成。这样，我们可以避免重复加载同一张图片。

详细来说，思路是这样的：在 `` 标签中，先将 `src` 属性设置为一个占位图片的路径，而将真正的图片路径放在 `alt` 属性中。当图片进入用户的可视区域时，通过 JavaScript 替换 `src` 属性的值，从而加载真正的图片。通过改变图片的类名来判断哪些图片需要加载，哪些已经加载完成。

代码中的注释已经十分清晰，各位开发者可以细细品味。我们非常欢迎各位提出宝贵的建议和反馈。您的每一个建议都是我们前进的动力，让我们共同完善和优化这一实现方式。

通过 `cambrian.render('body')` 来渲染页面主体部分，使得整个页面更加生动和富有交互性。让我们一起更多关于懒加载技术的可能性，为用户带来更好的体验！