Difference between preloading images and lazy loading images

[TrickyTricks]

Looking and this

https://stackoverflow.com/questions/476679/preloading-images-with-jquery

and

fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html

I am wondering or not really understanding the use cases between preloading and the difference to lazy loading or smart lazy loading (load the images in the proximity of the current location of a user on a website).

As far I understand if I preload images I preload all of the images of the website before even showing any other content of the website? Will that not greatly reduce the overall loading time of the website? This is case 1 in the post by Dimitar Christoff.

What other use cases are there and why would I actually preload images of a website? Is this just for small resolution images, e.g. to have images ready for rollover effects or is this also a good idea for high resolution images?

Considering these above questions would it then not be preferable to smart lazy load images of a website to reduce HTTP requests and overall loading time of the website?

Again when I mean smart lazy loading images I understand this as making sure the images that need to be loaded first can be of a small resolution and then I can quickly use something like this

https://css-tricks.com/forums/topic/enquirejs-and-jquery-swapping-image-sources-depending-per-media-query/

to load the images that best fit the resolution and viewport of the device. Here I also mean that images that are in the proximity of where the user is on the website are also loaded, but only those and none other.

TLDR: What is the difference in concept or how can I think of such a difference between preloading images and lazy loading images? What technique is applicable or preferable for what use case please?

[Shikkediel]

Preloading can have a few reasons, probably mostly for esthetic purposes like not wanting to see any “build up” of the content (with a slideshow for example) or instant visibility when switching cursors. I haven’t seen any cases where one would preload a small image to be a placeholder of a larger file until that is also fully downloaded.

These days most emphasis is put on showing any content as quickly as possible (a trend I don’t follow myself, I like to show a loading spinner until the page is ready and preload everything necessary).

You could use lazy loading to save the visitor bandwidth. I can’t see how it would deliver the content more quickly though.

[TrickyTricks]

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?

Example:
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?

[Shikkediel]

The pages I made usually wait for the window.onload event to show most of the content so this implies waiting for all resources (JS included) to have downloaded. The overall file size is limited though so not lazy loading anything only has a limited impact. I haven’t gone to the point yet where only the section of the page one actually lands on gets it’s images loaded first. This would of course be an improvement but I’d prefer to never get a “flash of unstyled content”. Still a work in progress on many fronts.

http://ataredo.com/

A few approaches are in place to generally speed up things there. Like checking for cached images (then the spinner is not shown – try and refresh it), compressing them, saving scripts in localStorage and loading them asynchronously (instead of one after the other) to begin with. Google PageSpeed “complains” about the multiple initial requests though (about which I do not care much).

Score is quite fine because of the async thing

In short – it’s probably mostly a personal preference, coming back on your example…

And there’s a lot of tweaks to speed up a page (perceivably), the images are only one factor.

By the way, I think research has shown that visitors hardly ever flick through a slidehow at all.

[Shikkediel]

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

Yes, I insert the complete HTML instead of using new Image(). This will also make sure there are no unnecessary request when the images were previously cached.

to have a loading animation while still having critical “above the fold” CSS show up fast while the rest loads.

This is trickier than it seems when you take a cached scroll position into account. Although there is only a small chance that images are not cached in that case. Happens with Opera though which is very stubborn with this.

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?

No but I do try to share resources. So if the visitor goes to another page, I take advantage of cached items. Whether images (identical file paths among pages) or scripts (local storage).

[TrickyTricks]

Thank you for your in depth reply. Great infos!

When you write

Yes, I insert the complete HTML instead of using `new Image()`.

do you mean you actually put down the source attribute into the HTML with the complete link to the image with image file extension at the end instead of having a script load it into cache? This then leads to having the images in cache and when you use the same HTML on another page of your site they are already there and won’t be downloaded again, right?

I am will research the window.onload event to see what you are talking about there.

I haven’t gone to the point yet where only the section of the page one actually lands on gets it’s images loaded first.
This would of course be an improvement but I’d prefer to never get a “flash of unstyled content”.
Still a work in progress on many fronts.

To avoid the “fouc” I was thinking to have a spinner/loading animation for as long as the images/content are loading for that section and only once loaded (on a callback of all images/content loaded) “open” the section of the site to the user. How would a “fouc” sidle into that?

I will also research how to load scripts into localStorage what seems a great idea. A fellow local webdev urges me to learn localStorage every time we meet up and now you mention it, I guess really worthwhile doing that?

Great score on your site! One thing that happened though was that when I first clicked the link the page showed up blank, without any of the links or images or content, simple the dark background. Only on refresh did the animations and links and content show up. Not I don’t know why this happened but I will try and reproduce this by emptying the cache. On purpose I visited with FF 28.0 so perhaps you can find that in your logs to see what went wrong. I will get back to you about this once I have tested with other browsers.

Also on the PageSpeed result the view shows empty, even after a couple of retries with PageSpeed. See here for mobile view http://pasteboard.co/lF2ede6.png and here for desktop view http://pasteboard.co/lFdVFEL.png .

Oh and I forgot, regarding loading the correct images for the device I have posted this topic https://css-tricks.com/forums/topic/enquirejs-and-jquery-swapping-image-sources-depending-per-media-query/ and have this working fiddle https://jsfiddle.net/k0a00s13/ . I am thinking of using that for the future for “responsive images”. Do you think that is something or a total fail of logic and coding? I think with that approach in most cases the right image can be loaded for the device specs, though one has to wait for jQuery and EnquireJS to be downloaded. This can be done with the window.onload even as you write, so all cool there, no? I just don’t see myself using all these fancy CSS3 rules or HTM5 tags for responsive images if it can be done backwards and cross-browser compatible with jQuery and EnquireJS, that I often use for responsive sites. No matter how strange it may feel to have JS run per media query I think it is THE concept for responsive design for a site. Your thoughts?

Really enjoying this conversation, thank you for your time and effort you put into your replies sharing your experience with me! :)

[Shikkediel]

I’ve been adjusting the pages somewhat since I posted the previous reply. Not sure what’s going on with PageSpeed, I think I messed something up a bit. Possibly the same reason the initial page load isn’t correct. But I can’t reproduce it at the moment, it seems to load fine when I try. I’m gonna have to look into it, thanks for the feedback in any case. The Google score isn’t quite respresentative because of it either – it’s actually 84 (so 6 points less) because of a “penalty” for delaying full visibility of the page.

Looking into local storage is definitely worthwhile. Once you get the hang of it, it’s actually quite easy to use. And it has very good browser support.

How would a “fouc” sidle into that?

It won’t, what you describe is exactly how to avoid it. Same as I’m doing for the complete page, where it might occur if I didn’t wait for all resources to be downloaded.

Yes, I insert the complete HTML instead of using `new Image()`.

It’s just a quirk of new Image(), it can be useful in some cases but will always trigger a reload of the image where injecting the complete element will not (but get the cache advantage) :

$('#parentelement').append('<img src=" ... " alt=" ... ">);

Neither approach would be necessary in your example though. It’s good to mention there’s degrees of preloading – waiting for onload and then doing something or injecting the image element with a script so it is cached before it is needed somewhere, like with a cursor that changes on mousedown for example or some hidden background images. There the download will only initiate once the mouse event takes place or the element itself in shown in case of the background image. I tend to “precache” then.

when you use the same HTML on another page of your site they are already there and won’t be downloaded again, right?

Indeed. When the file is the same (path), it will be taken from cache.

I’ll have a look at your other topic as well. :-)

Edit – I think I made a quick fix for the page loading issue that was mentioned (and the PageSpeed results, it’s now telling to “prioritize visible content” again). Using async scripts and self invoking functions can be very tricky when it comes to the exact timing…

[Shikkediel]

If you move the magnifier (on desktop) with the pen below, you’ll see that the new cursor is there immediately on mousedown. That’s because it’s preloaded (bottom of the script)… there would be a small period of “nothingness” in between until the second image is fetched otherwise.

Script

var icons = ['touch.cur','touch.png','swipe.cur','swipe.png'];

$.each(icons, function() {$('#deposit').append('<img src="' + location + this + '" alt=""/>')});

Demo

I also intend to add a progress bar to the spinner on the site by the way. That’ll give any visitor a better idea of what to expect.

One of the other few pages I’ve made uses a primitive form of lazy loading I suddenly remembered…

http://ataredo.com/design/fonts

function showNext() {

    $(window).bind('scroll', function(e) {

        if ($(window).scrollTop() > edge) {$('#image_02').show()}

        if ($(window).scrollTop() > edge+1250) {$('#image_03').show()}
        if ($(window).scrollTop() > edge+2500) {$('#image_04').show()}
        if ($(window).scrollTop() > edge+3750) {$('#image_05').show()}
        if ($(window).scrollTop() > edge+5000) {$('#image_06').show()}
        if ($(window).scrollTop() > edge+6250) {$('#image_07').show()}
        if ($(window).scrollTop() > edge+7500) {$('#image_08').show()}
        if ($(window).scrollTop() > edge+8750) {$('#image_09').show()}

        if ($(window).scrollTop() > edge+10000) {$('#image_10').show()}
        if ($(window).scrollTop() > edge+11250) {$('#image_11').show()}
        if ($(window).scrollTop() > edge+11500) {$('#image_12').show()}
        if ($(window).scrollTop() > edge+13750) {$('#image_13').show()}
    });
}

Time for a rewrite on that one, I believe.

[Author]

Posts