我在许多"现代"网站(如facebook和谷歌图像搜索)中都注意到了这一点,在这些网站中,只有当用户向下滚动页面,使其进入可见的视口区域(upon view source, the page shows X number of 100 tags but they are not fetched from the server straight away)时,折叠下方的图像才会加载.这项技术叫什么?它是如何工作的?它在多少浏览器中工作.有没有一个jQuery插件可以用最少的编码实现这种行为.

Edit

额外好处:谁能解释一下HTML元素是否有"onScrolledIntoView"或类似的事件.如果没有,这些插件是如何工作的?

推荐答案

这里的一些答案是针对无限页面的.萨勒曼问的是懒惰的图片加载.

Plugin

Demo

编辑:How do these plugins work?

这是一个简化的解释:

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

Html相关问答推荐

带有很长标签的Bootstrap复选框

HTML横幅未正确对齐页面顶部

如何通过将项目包裹在迪夫中来保持最右列的对齐方式来对齐项目?

使用Scrapy Select 最后一个子文本

在Apps Script中连接CSS与HTML

通过动态div的对角线

如何在元素的三条边中间换行边框?

响应CSS中的两到三列布局

Bootstrap nav没有崩溃

OnChange函数未在下拉列表中使用一个选项触发

角化、剪裁、边缘,但仅在底部2和平滑包装上

列表项文本在占据剩余空间之前在标记下换行

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释?

可以';t使我的导航栏在HTML/CSS中正确对齐

实验的响应式屏幕尺寸

调整屏幕大小时标题在图像下方重叠 - HTML

如何使我的设计适合与我的框架尺寸不同的视口?

如何在Bootstrap卡片底部添加波浪形状

Css 左属性问题

样式不适用于来自 tailwindcss 的网络