“懒惰负荷”的图像，是与内部容器“显示：无”添加到他们？

Question

我有点困惑如何延迟加载的图片一般的工作，并希望更好地了解。

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

我知道，这将“延迟加载”的图像，是“非首屏”。但是我想知道做它也延迟加载的图像，如果图像或图像容器被设置为“显示：无”或“隐藏”。

例如，我有一组“标签”，每个标签内部有产品。当然默认选项卡显示的图像 - 但其他选项卡与图像也直到人点击相应的选项卡不显示的内容。所以我的问题是这是否在上述“标签”的情景“插件”上面还有“懒加载”图像解决方案？

如果没有 - 有没有更好的解决办法，我应该尝试解决这个问题？

感谢您的见解！

编辑 - 添加IM JS回标签，因为PHP文件加载在它的底部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。

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