一尘不染

当用户将图像滚动到视图中时如何动态(或延迟)加载图像

javascript

我在许多“现代”网站(例如,facebook和google图片搜索)中都注意到了这一点,只有当用户向下滚动页面足以将其带入可见视口区域时,折叠下方的图像才会加载(在查看源时,页面显示_X_个<img>标记,但不是立即从服务器获取的)。这种技术叫什么,它如何工作以及在多少浏览器中工作。并且有一个jQuery插件可以用最少的编码实现此行为。

编辑

奖励:有人可以解释HTML元素是否存在“ onScrolledIntoView”或类似事件。如果没有,这些插件如何工作?


阅读 274

收藏
2020-05-01

共1个答案

一尘不染

这里的一些答案适用于无限页面。Salman问的是图像的延迟加载。

编辑: 这些插件如何工作?

这是一个简化的解释:

  1. 查找窗口大小并找到所有图像的位置及其大小
  2. 如果图像不在窗口大小范围内,请用相同大小的占位符替换
  3. 当用户向下滚动并且图像位置<滚动+窗口高度时,将加载图像
2020-05-01