Preloading images for element states

Question

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 have to work with it, so..

 <script type="text/javascript">
$(document).ready(function() {
    $('#searchbox_submit')
        .mouseover(function() {
            var src = $('.searchbox_submit').css("background-image",'url("/wp-content/themes/Locator/images/search_over.png")');
            $('.searchbox_submit').attr("src", src);
        })
        .mouseout(function() {
            var src = $('.searchbox_submit').css("background-image",'url("/wp-content/themes/Locator/images/search.png")');
            $('.searchbox_submit').attr("src", src);
        });
    $('#bribe_submit')
        .mouseover(function() {
            var src = $('.bribe_submit_img').attr("src").replace(".png","_over.png");
            $('.bribe_submit_img').attr("src", src);
        })
        .mouseout(function() {
            var src = $('.bribe_submit_img').attr("src").replace("_over.png",".png");
            $('.bribe_submit_img').attr("src", src);
        });
     ///////////////////////////////////////////////////////////////////////searchbox
    $('#searchbox_submit').click(function() {
        //,{onAfter:function(){ alert('tests'); } }
        //load_list($(this).parents('form').serializeArray());
        codeAddress();
    });
    $("#search_butt").keypress(function(event) {
      //load_list($(this).parents('form').serializeArray());
        if ( event.which == 13 ) {
            //load_list($(this).parents('form').serializeArray());
            codeAddress();
            event.preventDefault();                
        }
    });
});
</script>

and output:

<form>
                <!--<input type="text" class="searchbox" name="s" value="" />-->
                <input id="search_butt" class="i" type="text" value="Set your location: country, city" style="font-style:italic;" onblur="if(this.value=='') this.value='Set your location: country, city';" onfocus="if(this.value=='Set your location: country, city') this.value='';" name="s">
                <span id="searchbox_submit" class="searchbox_submit"/>
            </form>

is there any easy way without changing whole script?

P.s. sorry for bad english :)

possible duplicate of [preload an array of images with jquery](http://stackoverflow.com/questions/3862879/preload-an-array-of-images-with-jquery) — Joseph, Mar 23 '12 at 22:01

score 3 · Accepted Answer · answered Mar 23 '12 at 22:16

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

<img style="display: none;" src="/wp-content/themes/Locator/images/search_over.png">
<img style="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:

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    for (var i = 0; i < list.length; i++) {
        img = new Image();
        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.

Dmitry Pashkevich · Answer 2 · 2012-03-24T18:42:08.030

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:

<div class="preload">
   <img src="path/to/image1.jpg" alt="" />
   <img src="path/to/image2.jpg" alt="" />
   <img src="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:

Images with `display: none` are still fetched by the browser. — jfriend00, Mar 23 '12 at 22:41
The convention here would to edit your answer to correct it so it doesn't mislead others or attract downvotes. — jfriend00, Mar 24 '12 at 08:57
Corrected my answer. It's still better to use `visibility: hidden` for a preload container as it will allow downloading of background images and thus more universal for the "preload container" semantics. — Dmitry Pashkevich, Mar 24 '12 at 18:43

score 0 · Answer 3 · answered Mar 23 '12 at 22:01

0

you have to preload images yourself. like this

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

answered Mar 23 '12 at 22:01

Johnny Craig

4,974
2
26
27

Preloading images for element states

3 Answers3

Option 1. Using Image objects in JavaScript

Option 2. Extra HTML + CSS magic

Option 3. Use CSS sprites

Linked