loader jquery with preload image

by lovromar

HTML

<div id="main">
<h3>We have <span class="s_main_color">three foods</span> for you to choose from
            <form style="display:inline;float:right;margin-top:-3px;">
<select id="myads" name="ads" style="width: 150px;" class="required">
<option value="">--- Please Select---</option>
    <option value="apples.html">apples</option>
 <option value="pears.html">pears</option>
 <option value="carrots.html">carrots</option>
 </select>

            </form>
            </h3>
            <div class="clear"></div>
            <div id="adshowblock">
                
            </div>
</div>

CSS

#adshowblock {z-index:2;width:500px;height:500px;border:1px solid #aaaaaa;position:relative;background-color:#fff;}

#adshowblock .loader {z-index:1;top:50%;left:50%;position:absolute;}

h3 {width:500px;}

#main {margin:20px;}

JavaScript

var $loadContainer = $("#adshowblock"); 
var $preloadHTML = $('<div class="loader"><img src="http://carestream.com/images/ajax-loader.gif"></div>');  
$("#myads").change(function(){
  //$("#adshowblock").load( $(this).val() );
    var loadFile = $(this).val();
    if (!!loadFile) {
        $loadContainer
        .html($preloadHTML)
        .load(loadFile, function() {
            $preloadHTML.remove();
            alert(loadFile+" was succesfully loaded!!");
        });
    }
    else {
     // null value nothing happens
     return false;              
    }             
});