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()?

enter image description here

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.


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -