当前位置: 首页 > 知识库问答 >
问题:

为什么不总是使用本机懒惰加载(图像属性加载=“懒惰”)?

夏侯腾
2023-03-14

我试着把我的头绕到相对较新的img属性“加载”上。

我知道,如果img具有load=“lazy”属性,那么它会告诉支持该属性的浏览器,在接近视口时可以加载该属性。

那么为什么不总是设置loading=“lazy”?那些立即出现在屏幕上的图像无论如何都会被渲染,因为它们已经在视口中了。因此,在这种情况下,基本上忽略了load=“lazy”。

在这个演示https://mathiasbynens.be/demo/img-loading-lazy中,我还看到dom顶部的图片具有加载=“懒惰”属性集。

上面的链接来自:https://web.dev/native-lazy-loading/

提前感谢:)

共有3个答案

杨志强
2023-03-14

这是对浏览器的一个提示,图像可能不会立即有用/可见,它应该优先考虑其他资源。图像旋转木马中的第三个图像或显示在页面下方的图像是该属性何时有用的一些很好的例子。

过于懒惰的实现,如火狐,在滚动到视图之前不会显示图像。这将导致浏览器在加载图像时显示白色区域。这不是一个理想的用户体验。另一方面,Chrome在图像出现在屏幕上之前加载3000-8000px,这又太急切了。

Chrome不会加载延迟加载的图像,即使它们在背景打开的选项卡的视口内。这是由Chroium的Intersection观察员的限制引起的,可能会在未来的版本中修复。

公良运锋
2023-03-14

我能想到的不总是使用延迟加载的原因之一是当网络可能被中断时。在这种情况下,您希望在连接处于活动状态时尽可能多地下载,以便在连接关闭时页面的大部分内容可用。

施誉
2023-03-14

对于第一个可见视口中的任何图像,应避免设置load=lazy

资料来源:https://web.dev/browser-level-image-lazy-loading/#avoid-延迟加载第一个可见视口中的图像

简而言之,如果没有懒惰地加载图像,浏览器可以立即开始抓取资源。懒惰图像需要等到浏览器渲染管道的布局阶段,以确定图像是否在视口中。

不必要地添加loading=lazy可能会在网页完全呈现之前增加少量延迟。

 类似资料:
  • 我有一个数据表的问题-懒加载。我认为问题是在IdiomasBean.java(TableBean.java),如果我把: 我得到了正确的数据表,但是<代码>按排序、筛选和不起作用。 我得到:java。lang.NullPointerException这里是堆栈跟踪: 下面是代码的其余部分: 指数xhtml diomasBean.java 懒散的数据模型。JAVA IdiomasBo.java 习语

  • 使用Android Universal Image Loader和RecyclerView异步加载图像,我会遇到与其他人相同的错误,图像会混淆;直到它们都加载了一个缓存。 适配器的代码: 我知道它必须是中的某个东西,因为它需要更新每个视图,但我没有正确地更新。 这与图书馆无关。在不缓存图像的情况下执行延迟加载时,也会发生相同的行为。错误是因为我不知道如何更新中的。 谢谢!

  • 我试图在primefaces数据表设置中实现延迟加载。目前,在没有延迟加载实现的情况下,这是可行的,但是在实现延迟加载后,我在datatable中没有得到任何数据。但是,我可以在我的LoadData方法中打印我的列表,以验证数据是否正在加载到我的列表中,但一旦返回我的LazyModel并尝试加载datatable,似乎就会出现问题。这可能只是我忽略的一些简单的事情。非常感谢您的帮助! 这是我的屏幕

  • 我正在为列表视图编写一个lazyload代码,在这个代码中,我得到了一个json格式的文本和图像url,并将它们放在列表视图中。 图像和文字都相应地显示为我想要的。 我面临的问题是,当列表向下或向上滚动时,视图的索引会受到干扰。 假设我的列表中有10个元素,图像可以横向预览。最初,我可以看到4个元素的onclick操作运行良好,但当我向下滚动并单击第7个元素时,索引会受到干扰,并导致空指针异常。

  • 我还有以下两个类,它们是由我的测试模型生成的: 在DBContext的构造函数中,我显式启用了延迟加载,甚至不需要: 后来我打电话给房子列表: 在标记的断点之后,我预期,由于延迟加载,与房屋相关联的所有人员此时都不会加载。我没有访问一个人,为什么要加载他们?但是它们被加载,因为我的调试器向我显示了所有的name属性。 有人能解释一下这种行为吗?为什么惰性加载不起作用?

  • swiper中的图片如何懒加载,还是根本不做懒加载? 求大佬指教!!!