Reply To: Difference between preloading images and lazy loading images

[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! :)