"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

This question seems to be about a WordPress plugin? If so, add the appropriate tag. — mbj, Feb 04 '19 at 09:30
Yes while the plugin is wordpress, any php, js solution would work fine. — KYSSE, Feb 04 '19 at 09:32
That's what im trying to do, to see if my current solution is working that way. And if not - what solutions are there instead? — KYSSE, Feb 04 '19 at 09:35
Isn't this more of an HTML/CSS question than PHP? It sounds like what you want to know is whether browsers load resources inside display:none elements. (They do: https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) — Christoph Burschka, Feb 04 '19 at 09:43
Oh no, i know they do load if they are present in the dom and hidden, I am asking if "lazy load" ie (my posted lazy loading solution above) solves that very problem. and if not - how to solve that problem. — KYSSE, Feb 04 '19 at 09:45
Also im adding JS back to the quesiton 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 — KYSSE, Feb 04 '19 at 09:46
Once more: why not check what happens? Provide the markup for that special situation, open your browser's network console, load the page, see which images are loaded initially — Nico Haase, Feb 04 '19 at 09:50

score 0 · Answer 1 · answered Feb 04 '19 at 09:59

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

So you are confirming if an image is "hidden" by means of jquery or css that it will use data-src to lazy load the image until displayed? Thank you for your answer btw! — KYSSE, Feb 04 '19 at 10:00
What I mean is. When the image is not in the `src` attribute, it will not be loaded at startup. The JS code at the bottom of the code adds some event listeners and checks the scrolling position in relation to the image position and will change the src to the data-src, when event occurs — yunzen, Feb 04 '19 at 11:36

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

1 Answers1