JavaScript image preloading

I have so many images in a slide show and I need serve this slide show on mobile Safari. I noticed that whenever the page loads it gets stuck for some time until all images get loaded.

I decided to load images with a click event when ever I need them for specific action instead of appending all images directly into the HTML.

I want to use image pre-loading script and then I will add the image depending on the user action.

Will image pre-loading effect the page load time, or will this help me to improve the page load time and adding images as needed?

Also do let me know if there is any other way to achieve it. My goal is to load the page faster and also want to add images as needed which will not effect the a开发者_如何学Pythonnimation quality and image rendering.

Image loading script

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

---

Use CSS:

a:hover {
    background:url("menu2.gif") left top no-repeat;
}