延迟加载的最佳方法是什么？

Question

我需要消除图像渲染阻塞，我将这个小脚本用于此

<img data-src>

$('img').each(function() {
    $(this).attr('src', $(this).data('src'));
});

这对所有浏览器都有好处，或者最好使用此插件https://plugins.jquery.com/lazyload/？

Answer 1

您可以添加此CSS规则以避免显示损坏的图像图标：

db.deleteContact(con);

这样，没有src的图像就不会显示。

Answer 2

您的代码应该适用于所有浏览器，但您可能希望使用某些Lazy Load Plugin功能。例如，它可以在真正需要时（即 lazy ）加载图像，而不是在用户可见区域之外加载图像。您的代码将尝试在同一时刻下载所有图像，即使不需要任何图像。

考虑添加对未启用JavaScript的机器人或用户的支持：

public function onlyInRules()
{
    return $this->only(array_keys($this->rules()));
}

Answer 3

实际上，浏览器默认情况下会稍微加载图像。网页顶部的图像不会暂停剩余部分的渲染。当从服务器浏览器获取图像数据时，并行绘制图像的保留空间以呈现其他元素。

您的代码生成图像并加载它而不将其附加到DOM。它不是延迟加载，可能是在某些情况下预加载。

延迟加载：不开始从服务器下载图像，直到它们的预留空间在浏览器视口上可见。它适用于页面长于视口的情况，并且有位置停留在页面下部的图像。在您滚动到该位置之前，您不会加载图像。

因此，如果您想使用延迟加载的好处，您应该选择插件选项。