如何使用JavaScript延迟加载图片

延迟加载是指您停止网页对象（通常是图片或脚本）加载，直到您网站的访问者实际需要加载它们。这个概念是创建完美关键渲染路径的一部分，您只加载页面首屏视图所需的网页内容。

延迟加载图片如何加快我的网站速度？

除了优化照片和减少您的网页使用的图片数量之外，延迟加载图片是提高页面速度的最佳方法之一。当您延迟加载图片时，您允许访问者的浏览器只加载用于访问者屏幕视图的图片。这意味着所有首屏下方的其他图片在访问者实际滚动到那里之前都不会加载。访问者将获得您网页的非常快的初始视图，因为他们的浏览器只需要加载首屏图片来获得页面的首次显示。

使用不使用jQuery的JavaScript（推荐）

有一些很好的小型延迟加载脚本可用，它们不使用jQuery，完美地完成工作，并且很容易设置。我们推荐的两个脚本是：

• be Lazy.js只有1.2kb大小，并且完成了它应该做的工作
• Echo.js另一个很好的小型1kb脚本，工作得很好

现在这两个脚本都需要一些阅读，因为您必须手动设置脚本。但这并不是很多阅读，并且两个脚本网站都有很好的文档可以跟随。

使用jQuery的JavaScript（不推荐）

不建议使用像jQuery这样的JavaScript库来延迟加载图片，除非您无论如何已经在网页上加载了库。加载jQuery.js文件对于页面速度来说不是最佳的，因为JavaScript库可能会减慢您的网站速度。

WordPress插件

当您使用WordPress作为您网站的CMS时，不建议使用插件有一个简单的原因，即所有WordPress的优秀延迟加载插件都使用jQuery库来运行。如上所述，在您的网页上加载jQuery可能会减慢它们，除非您能够延迟加载jQuery或者您无论如何都在网页上使用jQuery，否则最好不在网页上使用库。虽然有一些可用的插件不使用jQuery，但它们并不是那里最好的插件。在测试了它们之后，我们可以得出结论，它们没有一个正常工作，或者它们中有编码错误导致它们在某些浏览器中工作不正确。这就是为什么建议使用上述两个自定义构建的JavaScript之一，而不是使用WordPress插件。

当您的网站无论如何都使用jQuery（因为必要性）时，您应该彻底测试bj Lazy Load或Lazy Load插件。