CODEWITHSUNDEEP
javascriptjqueryhtmlimagerendering
Darshan
Darshan

Reputation: 760

Event handler for image load through jquery ajax

I am using jquery $("selector").load("url") method to load large markup from server. But in my case I have many large images inside that response html. And those images are rendering very slowly. So I would like to put a loading indicator until all images rendered completely. and then remove that indicator after all images are rendered completely. How can I achieve this using jquery load method.

Thanks in advance.

Upvotes: 1

Views: 353

Answers (2)

Azfar Niaz
Azfar Niaz

Reputation: 1546

You can use .load event attached with any DOM element like:

<div class="images" style="display:none;">
  <img src="img.png"/>
  <img src="img2.png"/>
  <img src="img3.png"/>
</div>

Now you can attach your actions in load event handler function:

$('.images img').load(function(){
   $('.images').show();
   //--Your code goes here //--
});

Upvotes: 0

bipen
bipen

Reputation: 36551

one way is to load the indicater in document.ready and hide it in load callback function

$(function(){
  //show you loader indicator
  $('#indicator').show();
  $("selector").load("url",function(){
     //indicator hide 
     $('#indicator').hide();
 })
});

this is just an example to get you started...callback function of load is called when the load completes... you can however show the indicator whereever you need to..just hide it when the load completes.

Upvotes: 1

Related Questions