不一致的用户体验与本地延迟加载图片

对于延迟加载图片的网页浏览器的原生支持的规格降落在HTML生活水平。这项新功能可以让Web开发人员告诉浏览器推迟,直到它被滚动到视图,或者是即将被滚动到视图加载图像。

根据HTTP档案,图片占了网页中位数字节大小的49%。延迟图像加载可以帮助减少这些图像对页面加载性能的影响。它还可以帮助客户降低数据成本,因为客户在页面上从不向下滚动查看图片。

在过去,延迟加载是通过响应滚动位置的变化和跟踪图像元素从页面顶部的偏移来实现的。这可能会降低页面滚动性能。相比之下,新的本地延迟加载图像更容易实现,而且不会降低滚动性能。它所需要的是一个额外的参数在您的图像。

负荷=“懒”SRC = “img.jpeg” 高度= “100” 宽度= “200”>

然而,目前的规范是模糊的什么时候浏览器应该加载延迟的图像。如果图像是可见它必须被加载或者是即将成为可见给用户。

这种模棱两可的规范已经创造了不同的用户体验的实现。深入挖掘细节上它们的区别之前,我首先需要关于路口观察API来解释。

路口观察是现代替代的手工处理滚动事件来计算元素是否在页面上可见的做法。现在浏览器的手柄,对于您和火灾事件时,跟踪的元素滚动到视图中。中的交观察者可以与周围的可见视口的余量(该被配置IntersectionObserver.rootMargin);在滚动进入视图之前,在可配置的距离上触发事件。

铬闪烁(铬),Mozilla的壁虎(火狐),和WebKit(Safari浏览器)具有使用交叉口观察所有实现延迟加载的图像。然而,每个执行已设定不同的空间!这些利润不重新编译渲染引擎配置。

铬眨眼使用的3000px上低延迟网络连接的余量,以及高达8000px上高延迟连接。根据不同的网络延迟,这可能会导致页面上的所有图像,马上加载。这种行为损害了一些数据,储蓄和加载性能好处,你可以以其他方式延迟加载图像得到的。

Mozilla的Gecko的设置无余量可言。其结果是,一个延迟加载图像将不被加载,直到它至少1px的是对用户可见。再次取决于网络等待时间,这可能会导致用户在加载图像看到的空白区域。这就产生闪烁的问题,相反在延迟加载行为过于懒惰。

更新():火狐81(由于在2021-Q1释放)将出台新的默认的全向根距为300px。

在撰写本文时,WebKit的实现还不完整。然而,一个提议的补丁将其边界设置为垂直100px,水平0px。这给浏览器一个小提示,以便在滚动进入视图之前开始加载图片。根据网络条件和滚动速度,这可能还不够。

浏览器厂商已经走了数据保存,感知性能,以及如何接受一个临时的空白区域之间不同的取舍。这些边距不是一成不变的,他们可能会随时间而改变。

这导致环境中的最终用户体验可以显着变化基于选择的用户的浏览器。更糟的是,网络开发者没有在这个问题上有发言权。

Web开发人员可以通过基于一个路口观察执行其延迟加载收回的用户体验的控制。然而,这比使用网络的本地选项更多的工作。它还需要做更多的工作到JavaScript是关闭状态正常的支持环境。

我认为这是很好的网页如果有更多网站采用采用全新的易于实现网络的本地方法延迟加载技术。但是,我真的希望这些不同的实现者可能一起匆忙吃了午饭,并可能对一个行为的人。

眨眼的行为被称为“过于热情”,我倾向于同意。然而,壁虎的行为似乎也懒得。我相信理想的默认保证金大概奠定了介于这两个实现。

我常常已经实施延迟加载有一两次的视口高度的保证金。这个想法已经得到浏览器准备一两个屏幕价值的内容。它加载更多的内容早些时候,据推测,大屏幕,与外形尺寸更小的设备更少的内容更强大的设备。这可能不是在任何情况下,最好的办法,但。