CODEWITHSUNDEEP
javascriptjqueryimagestylespreload
Mindaugas Jakubauskas
Mindaugas Jakubauskas

Reputation: 439

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

Upvotes: 1

Views: 2447

Answers (3)

Dmitry Pashkevich
Dmitry Pashkevich

Reputation: 13536

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:

Upvotes: 2

jfriend00
jfriend00

Reputation: 707746

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.

Upvotes: 3

Johnny Craig
Johnny Craig

Reputation: 5000

you have to preload images yourself. like this

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

Upvotes: 0

Related Questions