Reply To: Difference between preloading images and lazy loading images

[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…