异步div

Question

I have the following code in my Java EE application (JSP file, called from Servlet.java):

    <div class="drop">               
           <c:forEach var="widget" items="${widgets}">
              <div class="drag">
                 <p><h2>Widget</h2></p>
                 // WIDGET GRAPHIC REPRESENTATION
              </div>
           </c:forEach>
     </div>
     <input class="add" type="image" src="image.jpg">

What I want is loading and displaying the JSP file in the browser, and AFTER that, loading the widgets. The ideal situation would show a loading icon as long as a widget isn't loaded. How can I implement such an asynchronous solution? Could someone explain and/or give a small demo?

Answer 1

I think this should help you, I am not sure

//use id of div(that contains the widgets) that 
//you want to hide before all widget are shown
$('#my_div_id')
    .hide()  // hide it initially and then use load event handler
    .load(function() {
        $(this).show();//display/show the div when load completes
    })
;