当前位置: 首页 > 面试题库 >

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

郎雅昶
2023-03-14
问题内容

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

编辑

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


问题答案:

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

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

这是一个简化的解释:

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


 类似资料:
  • Flask 通常配合装饰器使用,装饰器使用非常简单,而且使您可以将 URL 和处理它的函数 放在一起。然而这种方法也有一种不足: 这就意味着您使用装饰器的代码必须在前面导入, 否则 Flask 将无法找到您的函数。 这对于需要很快导入的应用程序来说是一个问题,这种情况可能出现在类似谷歌的 App Engine 这样的系统上。所以如果您突然发现您的引用超出了这种方法可以处理 的能力,您可以降级到中央

  • 我正在使用slick.js构建一个旋转木马。但是,即使我将属性从更改为,在我滚动到该图像之前,图像仍然会被加载。我怀疑这是因为我的图像中有标记。我的问题是如何防止浏览器加载响应图像,或者如何正确地延迟加载响应图像。 这是我的img标签的样本

  • 问题内容: 在我的应用程序中,我需要从URL下载很多图片并将其显示在gridView中。(可以在1-200张照片之间)。我不想一次下载所有图片。我读到了关于延迟下载的信息,我的问题是:我只能得到Json的一部分,以其他线程下载图片, 并且只有当用户向下滚动 gridView时,我才继续到Json的其他部分,并且等等吗? 编辑:再次嗨。我想在此gridView中实现多选,而我很难在适配器的getVi

  • 我的页面中有一个ui视图。单击某个按钮时,将加载ui视图并替换为某个HTML。我想将页面向下滚动到页面刚加载的部分。 这有可能吗?提前感谢

  • 我将图像路径(来自图库的图像)存储在SQLite数据库中,现在加载到图像视图中。。。并使用此代码: 和错误: E/BitmapFactory:无法解码流:java.io.FileNotFoundException:/storage/emulated/0/DCIM/Camera/IMG_20161230_224205.jpg(权限被拒绝)

  • 我似乎不能为我的生活得到任何图像懒惰加载插件在wordpress工作。我尝试了懒负载,wp懒负载和bj懒负载。网站上的图像似乎没有一个是“懒惰加载”的。我也使用审计工具(chrome审计)测试了这个。当我删除图像(每页大约有50张图像)时,我的审计绩效和其他分数为99。当我加载图像(使用wordpress循环),我的性能下降到64. 我尝试了每一个延迟加载插件,但它们似乎都不是延迟加载。我正在本地