Lazy load images inside a non visible container

[Princu7]

Are you reporting a bug or requesting a feature? Not really a bug but an issue I am facing.

What is happening? I have a bunch of collapsible divs which expand on the click of a button. These collapsible divs have an image inside them. Now, what I want to do is that these images should be lazy fetched like the same case when the images are actually visible on the page. But what is happening is either that all the fetched when the page is loaded or they are fetched after the user clicks on the button to expand the collapsed div and scroll a bit.

What is the expected behavior? I want the images inside the collapsed div to be fetched lazily from the server like in the case when the images are actually visible on the page and fetched based on the current position of the viewport. That is if the user is currently scrolling through a collapsible div having an image, it should be fetched from the server.

Which version of LazyLoad are you using? Latest

Could you provide the HTML, CSS and JS code you use for your images? I have made a codepen and added some comments. Please see them. Thanks :) https://codepen.io/ShortAndSimple/pen/gRKBEg

[verlok]

Hi @Princu7, I took a look at the pen you linked, and the expected behaviour seems to me already the right one. Have you managed to solve this by yourself, using the skip_invisible option set to false? If yes, please close this issue.

[Princu7]

@verlok Thanks for the reply. Sorry, I wasn't properly able to explain the problem. I have made some changes on the codepen and the buttons for collapsible elements are far away from each other. Maybe a couple of them are within the viewport and rest of them are outside the viewport. The threshold is set to a very minimum to not load images that are further ahead in the viewport.

Now, when I fully refresh the page, all the different images ( 3 of them ) which are used on the page seem to be fetched from the network. What I would have wanted was that only the images which are within the viewport should be fetched and the rest of the images would be fetched as we scroll further down the page. But instead of it, all the images, no matter where they are located on the page, when they are present in a display: none container, load up all at once. This is not what I want.

I hope, I was able to explain it a bit better. Thanks for your time. Please take a look into it. Have a nice day!!

[Princu7]

Maybe this problem is occurring because the images are contained inside a div which has a property of display: none. I read somewhere that when an element has display: none as one of its property, its position is not computable? Maybe because of it, we are not able to get the position of images properly and hence they load up all at once? Please clarify!!

[verlok]

What I would do in your place, instead of loading invisible images (which results in bad performance and wasting your users bandwidth), is to make the images load only as they appear on screen.

In this example, which is a fork of yours's*, whenever a collapsible is expanded, the LazyLoad update method is called, making the magic happen.

I hope this helps!

* Bootstrap JS and CSS + LazyLoad external script were placed in the related Codepen settings.

[verlok]

Psst: have you already starred this repo? All you need to do is to press the Star ★ button on the top right corner of the website. ;)

[verlok]

I'm closing this issue now, if you still have questions do not hesitate to open it again. I hope you solved it! Let me know in the case.

[verlok]

I'm closing this issue now, if you still have questions do not hesitate to open it again. I hope you solved it! Let me know in the case.

[Princu7]

@verlok Hey. Really sorry for not being able to follow up immediately. Yes, that works :smile: But on the networks with high latency, lazy fetching it when the user presses the button means that the photo is not loaded at least for a little duration. This is the issue. I don't want the user to know that lazy loading is going on. If we can lazy fetch the images (viewport + little extra threshold), even when they are not visible, the user will not see the process of fetching the image (as it would be happening in the background) and images would instantly be visible when the divs are uncollapsed.

Can something like this be done? Thanks for being so helping. You rock :metal:

[Princu7]

I don't see a button to reopen this issue.

[verlok]

Hey. It can't, because for the invisible images it's impossible to determine their position in the scrolling pane. I advice to re-think your concept of performance: if the connection speed is slow, loading ALL the images whether the user shows them or not is NOT a best practice, because it would hog their bandwidth, and in some cases pay money for getting nothing. Do the best thing imho would be do what I suggested, and maybe save the images in the progressive JPEG format if you can (google it). If you really hate your users, :P I have an idea to do something like you suggested using LazyLoad + some custom lines of code. But again, I wouldn't recommend it.

[verlok]

Please let me know if we can consider this issue closed.

[Princu7]

@verlok Okay, Yes. Thanks for explaining. I totally understand what you are saying and agree with it. I think I will go with the option you suggested :+1: Actually, I was referring to those networks which have good downloading speed but high latency. But, it doesn't seem to be worth to be changing the library code for this use case. Thanks again for your help. I will ping you if I have some more questions. Have a nice day.

[Princu7]

Closing the issue :)

[liitfr]

@Princu7 did you consider using service workers ? Your requirement looks like a common use case. Maybe worth have a look :eyes: Good luck, Mathias

[Princu7]

@liitfr Thanks! Yes. I have read about service workers and they are great to reduce the loading time of the page on subsequent loading. The problem which I am facing is on the initial load of the page when the images either load up all at once (without lazy load which takes up quite some time) or when the div is collapsed on user click (done with lazy load). But due to high latency, the time taken to fetch the image from the network is a bit high which creates a delay in loading the image which doesn't look very great. So, it's kind of a compromise. Thanks for helping. Would love to hear more of your ideas! Have a nice day!

[verlok]

And didn't you consider using a CDN to reduce images latency and loading time? We use Akamai at our company and I strongly advice using it. They also have a service to optimize images automatically. Alternatively, you could use other CDNs, or use Cloudinary which is a service that scales and optimize your images, and it integrates Akamai's CDN.

[liitfr]

Ho I see !

Custom lazy Load solutions like this one suggested by David Walsh could fit.

As a last resort there's another package that has an option that particulary adresses your need : https://github.com/aFarkas/lazysizes#js-api---options

lazySizesConfig.preloadAfterLoad (default: false): Whether lazysizes should load all elements after the window onload event. Note: lazySizes will then still download those not-in-view images inside of a lazy queue, so that other downloads after onload are not blocked.)

I apologize in advance if this last suggestion is inappropriate here ...

Mathias

[verlok]

I'd suggest NOT to download all images after the window load event since users browsing from mobile will have a paid connection / limited bandwidth and it's really NOT NICE to them sucking them traffic even if they aren't interested in the whole page content / they clicked a link as a mistake.

PS: Not a problem, I know about LazySizes from @aFarkas :)

[verlok]

If you want to achieve best performance my suggestion is to eagerly load the first N (4? 8?) images of the page, then lazily load the rest. This is because the browser will start to download the first N images as soon as the page is parsed, then the lazy ones when JavaScript (LazyLoad) is parsed and executed. To avoid having the "image is loading" effect on page you could play with the threshold option of my lazyload script that tells it how many pixels outside the viewport to load the images in advance