是否在容器內添加了“ 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 。

所以，是的，這是一個合適的延遲加載腳本