The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Difference between preloading images and lazy loading images Reply To: Difference between preloading images and lazy loading images


Thank you indeed for your reply. This makes my understanding of this a bit better.

I also don’t really see the need to load content as quickly as possible but to have a loading animation while still having critical “above the fold” CSS show up fast while the rest loads.

When you write you preload <i>everything</i> do you mean everything necessary for the first impression of the site?

Let’s take a small static site, 4 menu items, 4 separate simple HTML pages for that. On page 3 is a slideshow.

So by chance the user lands on page 3. What I understand you do is show a loading animation, some kind of spinner or well animation, and while that is showing you preload <b>all</b> the images of the slideshow and only then you “open” the site to the user. Understood correctly on my part?

Or do you also actually load the few images and graphics/GIFs/etc that might be on page 1, 2 and 4 as well and only then “open” the site to the user?

When we talk about preloading here, it actually means that the images get downloaded into the cache of the browser, right?

Trying to wrap my head round this and see what an ideal approach would be.

Real Life Example:
Got a client (barber shop) that specifically wants a one-page design and has either 1 or 2 slideshows at various sections of that one-page site. I guess for this use case it would make sense to actually preload all the images in the various slideshows and showing a loading animation and once the preloading is done “open” the site to the user, right?

I think like this, also the overall feel of the site is perceived faster as then when the user quickly flicks through the slideshow items (like users do..) they are all there without waiting time. What do you think?