Preloading Images For Element States

August 20, 2024 Post a Comment

i've got some jquery script that changes element image on mouseover and the problem is it doesn't preload images.. I know the code is crappy a little (ok, ok really crappy), but i

Solution 1:

The simplest way is to just add this to your HTML:

<imgstyle="display: none;"src="/wp-content/themes/Locator/images/search_over.png"><imgstyle="display: none;"src="/wp-content/themes/Locator/images/search.png">

Then, both images will be already cached by the browser.

You could also preload via javascript like this:

functionpreloadImages(list) {
    var img;
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    for (var i = 0; i < list.length; i++) {
        img = newImage();
        img.src = list[i];
        preloadImages.cache.push(img);
    }
}

var myImages = [
    "/wp-content/themes/Locator/images/search_over.png",
    "/wp-content/themes/Locator/images/search.png"
];

preloadImages(myImages);

You put this code in the <head> section so it executes as soon as possible.

Solution 2:

Option 1. Using Image objects in JavaScript

var preloadImages = [
    'path/to/image1.jpg',
    'path/to/image2.jpg',
    'path/to/image3.jpg',
    ...
];
for (var i=0, len = preloadImages.length; i < len; i++) {
    (new Image()).src = preloadImages[i];
}

Note that you don't need to insert those images into DOM.

Option 2. Extra HTML + CSS magic

First, you want to make a separate container where you would put the images that you want to preload:

<divclass="preload"><imgsrc="path/to/image1.jpg"alt="" /><imgsrc="path/to/image2.jpg"alt="" /><imgsrc="path/to/image3.jpg"alt="" /></div>

And here's the CSS:

.preload {visibility: hidden; overflow: hidden; width: 0; height: 0;}

You will want visibility: hidden which makes the element and its contents invisible, but still take part in page layout. The images inside the preload container would be fetched by the browser. The other properties are there so that your preload element doesn't take up space in on the page. Also, you will want to put it in the end of the document body. Using visibility: hidden; is safer than display: none; because it will load background images as well.

Option 3. Use CSS sprites

If you take the trouble to prepare them, you won't have to bother preloading different state images for your elements as they will load together with the initially visibile ones. Here's a couple of articles:

Solution 3:

you have to preload images yourself. like this

<imgstyle='display:none;'src='/wp-content/themes/Locator/images/search.png'>

JavaScript Download