图片懒加载实现及其原理

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

我们之前看到的懒加载一般是这样的形式：

• . 浏览一个网页，准备往下拖动滚动条
• . 拖动一个占位图片到视窗
• . 占位图片被瞬间替换成最终的图片

我们可以在示例中看到懒加载是如何使用的，网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。
下图所示 ：

黑色的 是占位图片

当用户滚动时 将隐藏的图片显示出来（已经进行了优化 当用户打开网页时 会显示一部分图片）先调用一次 start () 增强用户体验

image.png

当一个元素出现在我们眼前 小于 窗口高度 加上窗口滚动的高度的时候 就意味着 到达目标点 可以开始加载图片 或者其他内容

对返回结果进行判断 结果为true时 开始执行加载任务 start ()

function isShow($node){
          
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

完整代码如下：

该示例 用jQuery 实现 ，对代码进行最大优化

//性能优化 进行判断 已经加载的 不会再进行重复加载

$img.attr('data-isLoaded', 1)