图片懒加载是一种优化网站和移动应用性能的技术，目的是在网页或应用中仅加载当前可视区域内的图片，对于不在可视区域内的图片则延迟加载，这样可以减少首屏加载时间，提升用户体验，并且减少服务器的负载。JavaScript（js）是实现这种技术的常用手段。
在本文中，我们关注的是如何利用js实现图片懒加载效果。实现图片懒加载的关键在于判断哪些图片需要立即加载，哪些图片可以延迟加载。通常的做法是监听滚动事件，结合图片距离视窗顶部的位置来决定何时加载图片。
我们需要为图片设置一个自定义的属性（比如命名为"_src"），用来存放图片的真实地址。当页面加载时，并不会立即加载这些图片的src指向的URL，而是等到用户滚动到图片所在区域，触发了滚动事件后，再将图片的真实地址赋值给src属性，从而触发浏览器加载图片。
在本文提供的示例代码中，首先在HTML部分为每个img标签设置了一个自定义的属性"_src"，而src属性则指向一个默认的占位图片。通过JavaScript脚本在页面加载完成后，或者当用户滚动页面时，计算每个图片元素距离视窗顶部的位置，并与视窗高度（clientHeight）及滚动条滚动位置（scrollTop）相加后进行比较。如果图片即将进入可视区域，就将真实图片地址赋给img元素的src属性，从而实现图片的加载。
此外，通过定义getPos函数，可以获取到元素相对于文档的位置信息。这对于判断当前滚动位置能否看到元素是十分关键的。需要注意的是，对于定位方式为static的元素，getPos函数返回的left和top值是相对于整个文档的，如果元素有其他定位方式（比如fixed、absolute、relative），可能需要相应调整计算方式。
在实际的开发中，当页面布局比较复杂，或者存在像瀑布流这样的异步加载布局时，懒加载技术的实现会更加困难。因为异步加载可能会导致页面元素的位置发生变化，这就需要更加精准的计算和时机控制，以确保图片能够在正确的位置和正确的时间被加载。
本文的示例代码采用了较为简单的逻辑，适合应用在基本的页面结构中。对于复杂场景下的懒加载，可能需要借助第三方库或框架来实现，比如Intersection Observer API。该API提供了一种监听目标元素与祖先元素或视窗交叉状态变化的方法，可以更高效地实现图片懒加载，且兼容性越来越广泛。
文章中提到瀑布流布局时，通常会有图片的异步加载，这时候就需要考虑图片加载完毕后的布局重排问题。瀑布流在实际使用中经常需要结合图片懒加载技术，来实现流畅且不卡顿的用户体验。在使用瀑布流时，还需要注意元素的加载顺序、图片加载完成后的尺寸变化以及重新计算位置的逻辑。
通过本文的介绍，我们可以了解到图片懒加载的技术原理、实现方法以及适用场景。对于开发者来说，理解和掌握这些知识点，可以有效地提升自己开发网站或应用的性能，提高用户体验。
