Preloading images for element states

问题

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 :)

回答1:

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.

回答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:

<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:

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
CSS Sprites: Image Slicing’s Kiss of Death

回答3:

you have to preload images yourself. like this

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

来源：https://stackoverflow.com/questions/9847012/preloading-images-for-element-states

标签

javascript

jquery

image

styles

preload