图片懒加载的实现原理

这篇文章介绍一下图片懒加载的原理

图片懒加载: 顾名思义-简单说就是当你浏览一个图片页面时,窗口上会先展示图片,此时其他的图片看不到,当你滚动页面向下浏览时,后面的图片会自动加载。

  • 下面先上图


    图片懒加载的实现原理_第1张图片
    原理图
  • 判断图片的位置是否在视图窗口内,如果图片出现在窗口内,那么加载图片,要点是怎么判断图片是否在窗口内

  • 图片上我标了3个高度-窗口的高度窗口滚动的高度(ScrollTop)图片到其顶部的高度。当ScrooTop与view窗口高度之和大于图片到其顶部的高度时图片出现在视野内,此时加载图片。

总结

  • 原理根本在于-通过判断三个高度之间的关系,判断出图片的位置,进而选择是否加载图片

你可能感兴趣的:(图片懒加载的实现原理)