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

Question

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

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

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

Answer 1

progressive:在页面显示后立即加载可见图像,在后台加载其他所有图像后加载其他图像(" 在init上加载可见幻灯片,然后在window.load()上逐步加载其余幻灯片. ").如果在显示页面的大部分时间(或全部)中使用其他图像,则应使用此选项.

按需:一旦页面显示就加载可见图像,只有在显示页面时才加载其他图像.(" [...]按需加载幻灯片.当幻灯片变得可见时(或在幻灯片回调之前),会激活加载. ")如果轮播的其他图像很少显示,则应该使用.

资料来源:https://github.com/kenwheeler/slick/issues/35,特别是jasonday的评论来自5月4日

Answer 2

值得一提的是，源代码中的 lazyLoad 选项还有另一个值，虽然没有记录：“预期”。它是在1.7.1 版中引入的

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

'ondemand'将在您滑动到该图像时立即加载该图像。

'progressive'在页面加载时一个接一个地加载图像。

'预期'预加载 1 个下一个图像和 1 个上一个图像。