一个浏览器窗口,显示六个已加载的图像和三个等待加载的图像。

使本机延迟加载图像的加载更为迫切

Firefox最近加入了Chrome并增加了对本机延迟加载图像(NLLI)。NLLI延迟加载图像,直到需要它们来加快页面加载时间,并减少显示页面所需的数据。

在之前的一篇文章(上面的链接)中,我讨论了Safari和Firefox是如何太懒(图像只在可见时加载)和Chrome是如何太急切(图像加载方式太早)。我解释了如何在浏览器中使用交叉观察者API,以及根缘变量控制“渴望”。在延迟加载图像的上下文中,急切性是用于讨论何时加载视图外图像的度量。

对于Chrome的过度热情,如果不完全放弃NLLI,我们没有什么好做的。它将图像加载到数千像素之外;这可能会浪费设备资源并减慢页面加载时间。不过,你可以很容易地让Safari和Firefox变得更急切一些,这样访问者就不会看到空的区域,因为应该保存图像的空区域会被滚动到视图中。

在我进一步讨论这个话题之前,我首先想敦促您充分利用渐进式JPEG图像. 渐进式jpeg可以在早期显示部分图像,并在下载时填充更高质量的细节。对于更多的访问者来说,这可能比本文中的主题有更大的不同。

现代图像格式不支持渐进加载。您可能使用了更现代的格式,如WebP,但仍有很大一部分web对大多数图像使用JPEG格式。Safari不支持WebP,所以至少在使用苹果浏览器的人群中,JPEG仍然是王道。

但让我回到加载图像的轨道上来。您可以通过设置交叉观察者带着想要的根缘急切。这个根缘指定元素在下载之前与可见视口的距离。

我建议使用根缘大约一到两个视窗高度(甚高频). 这是网页可见部分的高度;或者是浏览器的内容部分(不包括chrome浏览器)。这个根缘但是,属性仅支持像素值。您可以从窗内高度财产。

以下代码是一个完整的实现,可用于增强本机延迟加载映像。它不会覆盖浏览器的默认NLLI根缘,但这将有助于确保最低限度的热情。

if(窗口中的“IntersectionObserver”{//get all the lazy images var lazy\u imgs=document.queryselector全部('img[loading=“lazy”]');如果(lazy_长度>0){函数交集处理程序(观察到的imgs,观察者){观察到的_国际货币基金组织((ev)=>{//如果(企业价值交叉){//移除观察者观察员(企业价值目标);//图像尚未加载,因此如果(企业价值目标&& !ev.目标完成) { 电动目标负载=“eager”;}}});}//计算所需的rootMargins var rootVertical=parseInt(窗.内高*1.5);变量rootHorizontal=parseInt(窗.内宽*1.5);让交集处理程序={root:null,rootMargin:`${rootVertical}px${rootHorizontal}px`,阈值:0.0}//create the observer let observer=new IntersectionObserver(intersection_handler,C);//attach observer to images for(var img of lazy_imgs){观察者(img);}}}