“Lazy load” images that are inside containers with “display:none” added to them?

Question

I am a lil confused how lazy load for images work in general and would like to understand better.

I am using this simple php plugin to lazy load image on my website. https://github.com/Jumedeenkhan/lazy-load-for-images (js at bottom of php file)

I know that it will "Lazy load" images that are "below the fold". However I was wondering does it also lazy load an image if the image or the images container is set to "display:none" or is "hidden".

For example I have a set of "Tabs" and each tab has products inside. The default tab of course shows the images - but the other tabs have content with images also that are not displayed until the person clicks the corresponding tab. So my question is does this "plugin" solution above also "Lazy load" images in the scenario of "tabs" described above?

If not - is there a better solution i should be trying to solve that issue?

Thanks for any insight!

edit - im adding JS back to the tags since the php file is loading js script at the bottom of it. Which i think is the core of the lazy loading function

Answer 1

From line 82 on in that code you have this code

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>';

You will get HTML like this: The braces [] denote code that is inserted at that place but which is irrelevant to this question.

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

You see that the image is represented as data-src and not as src .

So, yes, this is a suitable lazy-loading script