Apply jQuery.get() on dropdown menu -

so, have dropdown menu using <ul> <li> menu </li> <ul>.

now, 1 of items has large file size , thinking of applying jquery.get() reduce loading amount , speed until clicked.

so, example, have following menu:

 <ul>     <li>        <button type="button">          <div class="_menu_title">map</div>             </button>        <ul class="dropdown_menu_sub">           <li class="dropdown_menu_sub_list">                 <div class="google_map"> google map content goes here </div>                               </li>       </ul>    </li> </ul> 

here, when map button clicked, google map shown in menu. however, noticed slows down loading thinking unless map button clicked, don't want map content loaded.

how can apply loading screen (to give user feedback happening) , load content using jquery.get()?

you can add loading-img per default , use callback-function of jquery's .get()-function hide when data loaded:

$.get("/echo/html/", function (data) {     $(".google_map").html(data);     $('.dropdown_menu_sub_list > img').hide(); }); 

demo

note: error-handling good, because if resource can't loaded loading-image stays there.