Please take advantage of browser lazy loading

it was like that, but for some reason having the lazy loading was causing an issue and images never showed up.
The option in feeds settings is still there, but images are no more lazy-loaded.

maybe they removed the lazy loading to bypass the issue.

Hi @bluantinoo,
Were they using the browser lazy loading i.e. loading="lazy" or they have use JS-based lazy loading?
Cause with browser-based lazy loading I don’t see a reason for it not to work. I can try editing the plugin cod and test if it works with browser level lazy loading.
But there is no reply from the plugin team so not sure if they will implement the fix or not.

Hi @isaumya frankly I did not notice how they were implementing the lazy loading.
I just know that in the feed setting there is the option for lazy loading the images, but it was bugged after the 3.7 release, at least on the carousel mode.
You can see a lot of support about that, like this thread: https://www.ads-software.com/support/topic/carousel-format-is-not-showing-images-only-showing-blank-white-kind-of-thing/

they released a fix in the latest updates, but as I can see, lazy loading now does not work, despite the option setting.

PS: in my experience, the last working lazy loading was on the 3.06 version, you can try to download that version and see what was happening in later versions.

• This reply was modified 3 years, 11 months ago by bluantinoo.
• This reply was modified 3 years, 11 months ago by bluantinoo.
• This reply was modified 3 years, 11 months ago by bluantinoo.

Hi @bluantinoo,
I dug deeper into the plugin code and when I checked the code of wp-content/plugins/insta-gallery/templates/item/item-image.php file, I saw this

<img <?php if ($feed['layout'] != 'carousel' && $feed['lazy']) : echo 'loading="lazy"';
          endif; ?> alt="Instagram" class="insta-gallery-image <?php if ($feed['lazy']) : echo 'swiper-lazy'; endif; ?>" src="<?php echo esc_url($image); ?>" />

Now as you can see in the code it is checking if feed type is != carousel and lazy option is selected like: https://i.imgur.com/CiQKSu1.png

Then only add loading="lazy" else don’t lazy load images for carousel basically.

So, played around with the code and basically added loading="lazy" for carousel mode and faced the problem like everyone else has faced before in the thread you have mentioned above.

Then I realized why the problem is happening. You see when carousal mode is being used the images are basically not part of DOM they are being added based on JS callback. That’s why you first see the spinner (JS is working) then you see the images. As these images are not part of normal DOM and mostly stays inside shadow DOM, loading="lazy" cannot lazy load the images. As the whole loading="lazy" works in the basis of the browser already have the full DOM and knows what to load where and then load the images based on the viewport.

So, now what’s the solution here? The only solution for the carousel mode or any JS-based modes is that the images need to be lazy-loaded using JavaScript. Where instead of loading the images as <img src="..."/> they need to be loaded as <img data-src="..." /> and then when the carousel section comes within the viewport, change the data-src of the image tags to src tag for the images to be loaded.

Unfortunately, as I have seen for this plugin the plugin authors do not like to participate in the support threads much, so I have no idea if they are reading this thread or if they will implement something similar soon.

Hi Guys
please update to latest version, this is supposed to be solved
regards

Hello @beluserra,
now I don’t get any error, but images in the carousel layout are NOT lazy-loaded.

thanks anyway…

Yes, images in the carousel are not lazy-loaded in any way which harms page speed very badly.

Hi @beluserra,
I don’t know what do you mean by this is supposed to be solved. There is absolutely no lazy loading for carousel type feeds. Maybe you have misunderstood the issue here. Please take a look at the thread messages thoroughly, especially this reply: https://www.ads-software.com/support/topic/please-take-advantage-of-browser-lazy-loading/#post-13776604