Geek Answers Handbook

Preloading images for item states

I have a jquery script that changes the image of an element on hover, and the problem is that it does not preload the images. I know that the code is a little crappy (good, good, true, 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 conclusion:

 <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 an easy way without changing integer script?

Ps sorry for bad english :)

+1
source share
3 answers

The easiest way is to simply 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 already be cached by the browser.

You can also preload through javascript as follows:

 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 that it runs as soon as possible.

+3
source

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]; }

Please note that you do not need to embed these images in the DOM.

Option 2. Optional HTML + CSS magic

First, you want to create a separate container in which the images you want to preload will be placed:

 <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 is the CSS:

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

You will need visibility: hidden , which will make the element and its contents invisible, but still take part in the page layout. Images inside the preload container will be selected by the browser. Other properties are there so that your preload element does not take up space on the page. In addition, you will want to put it at the end of the document. Using visibility: hidden; more secure than display: none; because it also loads background images.

Option 3. Use CSS sprites

If you take the trouble to prepare them, you don’t have to worry about preloading various state images for your elements, as they will be loaded along with the initially visible ones. Here are some articles:

+2
source

you need to preload the images yourself. like this

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

More articles:


All Articles