是否在容器内添加了“ display：none”的“延迟加载”图像？

Question

我有点困惑，一般来说，图像的延迟加载是如何工作的，我想更好地理解。

我正在使用这个简单的PHP插件在我的网站上延迟加载图像。 https://github.com/Jumedeenkhan/lazy-load-for-images（php文件底部的js）

我知道它将“延迟加载”“未折叠”的图像。 但是我想知道，如果图像或图像容器设置为“ display：none”或“ hidden”，它是否也会延迟加载图像。

例如，我有一组“标签”，每个标签内都有产品。 默认选项卡当然会显示图像-但其他选项卡也包含图像内容，直到用户单击相应的选项卡时才会显示。 因此，我的问题是，在上述“选项卡”方案中，上面的“插件”解决方案是否还会“延迟加载”图像？

如果不是-是否有更好的解决方案，我应该尝试解决该问题？

感谢您的任何见解！

编辑-由于php文件正在底部加载js脚本，因此我将JS添加回了标签。 我认为这是延迟加载功能的核心

Answer 1

从该代码的第82行开始，您拥有此代码

return '<img ' . $matches['before']
    . ' class="lazy ' . $matches['class1'] . $matches['class2'] . '" src="' . $placeholder_image . '" '
    . $matches['between1'] . $matches['between2']
    . ' data-src="' . $matches['src1'] . $matches['src2'] . '" '
    . $matches['after']
    . $matches['closing'] . '><noscript>' . $matches['all'] . '</noscript>';

您将获得如下HTML：花括号[]表示插入该位置的代码，但与该问题无关。

<img [] class="lazy []' src="/path/to/some-placeholder-image.ext" [] data-src="path/to/original-image-to-be-lazy-loaded.ext" []><noscript>[]</noscript>

您会看到该图像表示为data-src而不是src 。

所以，是的，这是一个合适的延迟加载脚本