延迟加载：渐进式和按需加载

Question

这是一个概念性问题。在我的特定情况下，我使用slick.js为网站创建图像轮播。由于这些是高分辨率照片，我想通过允许异步加载照片而不是页面加载来加快页面加载时间。

在浏览此库的文档时，我看到了'lazyLoad'属性的可用设置，几乎没有关于这些设置在实践中意味着什么的信息。

基本上我的问题是，在延迟加载的上下文中渐进式和按需式之间有什么区别。

Answer 1

渐进式：在页面显示后立即加载可见图像，在后台加载其他所有图像后加载其他图像（＆＃34; 在init上加载可见幻灯片，然后逐步加载window.load（）上的其余幻灯片。＆＃34;）。如果在显示页面的大部分时间（或全部）中使用其他图像，则应该使用它。

按需：在页面显示后立即加载可见图像，仅在显示页面时加载其他图像。 （＆＃34; [...]按需加载幻灯片。当幻灯片变得可见时（或在幻灯片回调之前），会激活负载。＆＃34;）如果是旋转木马的其他图像很少显示。

来源：https://github.com/kenwheeler/slick/issues/35，尤其是jasonday在5月4日发表的评论

Answer 2

值得一提的是，源代码中的lazyLoad选项还有另一个值，但未记录：“预期”。 它是在release 1.7.1

中引入的

lazyLoad接受“按需”，“渐进式”或“预期式”的延迟加载技术。

“按需” 将在您滑动图像后立即加载它。

“渐进式” 会在页面加载时先加载一幅图像。

“预期” 预加载了下一张和前一张图像。