十大图像最佳jQuery和JavaScript延迟加载器插件

本文概述

• 10. jQuery.LazyLoader
• 9. Lazy Load by VVO
• 8. Just Lazy
• 7. jQuery Lazy
• 6. Responsively Lazy
• 5. Lazy Load
• 4. Lozad.js
• 3. Unveil
• 2. jQuery LazyLoad
• 1. LazySizes

几年前, 对HTML结构的不良操作可能会影响页面的SEO, 因此必须遵循加载图像的常规规则, 即使图像很大也是如此。如今, 对于具有大量图形内容的每个网站, 必须进行 Lazy Load, 仅当你希望让访问者脸上露出微笑时才需要这样做。但是, 如果你的网站需要良好的SEO并同时为访问者提供最佳性能, 你应该怎么做？由于的搜索引擎开始呈现JavaScript, 因此它现在可以查看并索引你的 Lazy Load的图像。这仅意味着一件事, 你只需要担心网页的性能。

如果你的网站显示很多图像, 除了在后台使用减小尺寸的工具(例如在不损失质量的情况下)对它们进行优化之外, 对于此类网站, Lazy Load是一种非常不错且必要的技术。基本上, 仅当将要显示的图像进入用户的视口时才加载图像。在此顶部, 我们收集了10个最著名和最有用的jQuery或VanillaJS惰性加载插件, 你可以在任何项目中开始使用它们, 尽情享受吧！

10. jQuery.LazyLoader

此插件可让你将指向图像src或具有data-img属性的链接转换为具有该源的图像。

9. Lazy Load by VVO

该插件可让你使用独立的JavaScript lazyloader Lazy Load图片, iframe, 小部件。

8. Just Lazy

Just Lazy是一个轻量级的javascript插件, 用于 Lazy Load响应图像。现有的大多数javascript插件都使用广泛的依赖项, 或者仅支持img-tag而没有响应部分, 因此该插件是非常值得推荐的替代方案：

• 使用纯JavaScript(无jQuery)可实现100％的性能
• 100％有效的HTML(无空src标记)
• 简单明了(仅 Lazy Load图像, 无特殊情况)
• 经过各种设备, 浏览器和操作系统版本的严格测试

7. jQuery Lazy

jQuery Lazy是jQuery＆Zepto的轻量级, 快速, 功能丰富, 强大且高度可配置的延迟内容, 图像和背景 Lazy Load插件。通过仅在视图中加载内容, 可以缩短页面加载时间并减少用户访问量。你可以在所有垂直和水平滚动方式中使用Lazy。默认情况下, 它支持<img />标签和背景中的图像, 并随CSS一起提供, 例如background-image。在这些元素上, Lazy可以在加载时设置默认图像或占位符, 并且还支持视网膜显示。但是Lazy甚至能够通过插件和自定义加载器加载你想要的任何其他内容。

6. Responsively Lazy

响应式延迟是JavaScript中 Lazy Load的最佳实现之一：

• 不会发出任何不必要的请求
• 在支持srcset的现代浏览器上工作。截至2017年2月, 这一比例为85.27％。
• 处理加载的图像大小调整(当手机从纵向旋转到横向时)。这是一个不错的奖励。
• 使用旧的浏览器时不会中断页面
• 在类似Pocket的后读工具中效果很好
• 在Facebook和Pinterest等社交网络上的内容共享方面表现出色
• 支持WebP

5. Lazy Load

LazyLoad是一种快速, 轻巧和灵活的脚本, 可通过仅在图像进入(或即将进入)视口或可滚动区域时加载图像来增强网站性能, 并为img srcset属性和渐进式图像提供最佳支持JPEG图像格式。通过仅在图像进入视口时加载图像来加快Web应用程序的速度。 LazyLoad用纯净的(原始的)JavaScript语言编写, 具有Intersection Observer API, 它支持响应图像, 它对SEO友好, 并且还具有其他一些显着的功能。

4. Lozad.js

Lozad使用IntersectionObserver API, 是纯JS中的高性能, 轻巧〜0.7kb且可配置的 Lazy Load程序, 不依赖于图像, iframe等。这个插件：

• 使用纯JavaScript Responsively Lazy加载元素,
• 是一个轻量级的库, 只有731压缩并压缩,
• 没有依赖:)
• 也允许 Lazy Load动态添加的元素,
• 支持响应图像和背景图像

编写该文档的目的是使用最近添加的Intersection Observer API来 Lazy Load图像, iframe, 广告, 视频或任何其他元素, 从而显着提高性能。

3. Unveil

Unveil.js通过延迟长网页中的图像加载来延长网页的加载时间, 因为直到用户滚动到视口之外(网页的可见部分), 图像才会加载。 Lazy Load具有一些很酷的选项, 例如自定义效果, 容器, 事件或数据属性。如果你不想使用它们中的任何一个, 则可以通过仅保留必要的代码来显示图像来减小文件大小。默认情况下, 仅当用户滚动到图像并且它们在屏幕上变为可见时, 才加载和”隐藏”图像。

2. jQuery LazyLoad

jQuery LazyLoad阻止在视口之外加载图像, 直到用户滚动到它们为止。这是原始 Lazy Load插件的现代香草JavaScript版本。它使用Intersection Observer API观察图像何时进入浏览器视口。原始代码的灵感来自Matt Mlinac的YUI ImageLoader实用程序。新版本大量借用了Dean Hume的博客文章。

1. LazySizes

LazySizes是用于 Lazy Load图像(响应和正常), iframe等的最著名的插件之一, 具有高性能, SEO友好性, 并且无需配置即可检测到由用户交互, CSS或JavaScript触发的可见性更改。它也可能成为你集成响应式图像的第一工具。它可以自动计算响应图像的sizes属性, 允许你与CSS共享对媒体属性的媒体查询, 帮助将布局(CSS)与内容/结构(HTML)分开, 并将响应图像集成到任何环境中真的很简单。它还包括一组可选插件, 以进一步扩展其功能。

如果你知道另一个用于 Lazy Load图片的出色插件, 请在评论框中与社区共享。