This is how you might go about preloading images into the browser cache (Caching External Images) that will be later inserted into the page. This method would be useful only if you have many images and no control over the load order of the image containers. For example if you are grabbing the images for new tweets and then showing new tweets with user profile pictures. Before image loads from external server (Twitter in this example) there will be an ugly missing image icon.

Broken images…


After a few seconds the images appear…


So lets preload the external images…

So when the tweets are loaded in (whichever method your using) you can add this snippet to cache the user profile image.

//cache the user img
$('img').hide().appendTo('body').one('load', function() {
   console.log('Image: '+$(this).attr('src')+' is cached...');

Output in Firebug console

Output in Firebug net panel

That’s it your images should onw preload and not appear broken! :)

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Huy Thanh Nguyen

    Neat trick. Thanks for sharing.

  • James W

    great tutorial, thanks for detailed explanation

  • Pingback: 9 jQuery Preload Image Plugins | jQuery4u()

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.