How to Preload Images without Javascript?

javascript html image-preloader
Wasim Shaikh picture Wasim Shaikh · May 4, 2009 · Viewed 54.6k times · Source

In one of My Layout there are some large images (come from XML) which shown when I mouse hover on some some of the link, but when the Page loads and when i rollover It takes time to Load that Image.

Note: there are fix 5 images (not dynamic)

I dont want to use JavaScript to Preload Images any Solutions?

I am Not Using Hover menu or something like that, but this Images are Product Images and the links are Text link Got my Point??

Answer

Luis Dalmolin picture Luis Dalmolin · Sep 16, 2013

HTML5 has a new way to do this, by link prefetching.

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

Just add many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.

Note Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch

UPDATE

If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;

Related questions

How to preload a webpage before showing it?

I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once. I want instead to first show a "loading" gif in the …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More