Fading in Groups of images when they load.
Recently, I have been working on an online magazine using a javascript plugin. Clicking the pages causes a turn animation in the book. The pages are in div tags and are made up of images, so I put an img tag inside the div tag. Since the image files could be quite large, I decided to put an animated loading gif that would fade out when the image for the page had loaded. My problem is with the jquery code for this. When I do this . . .
Page of magazine structure in html:
- <div class="pageholder" name="Home">
- <div id="d1" class="loading" style="position:absolute; top:372px; left:285px;"><img src="images/lightbox-ico-loading.gif"/ alt="loading"></div>
- <img class="page" id="p1" src="pages/1s.jpg" alt="Page 1"/>
- </div>
Jquery:
- $("img.page").load(function() {
- $("div.loading").fadeOut("slow");
- $(this).fadeIn("slow");
- });
. . . The result is that all the loading divs will fade out, even the ones for pages that haven't loaded yet. The only thing I have been able to figure out is numbering my divs and imgs with id="p1" and id="d1" (see above) and then doing this with the jquery over and over . . .
- $("img#p1").load(function() {
- $("div.loading#d1").fadeOut("slow");
- $(this).fadeIn("slow");
- });
But that is very very redundant, requiring me to do that for every single page. There has got to be a better solution. Any help would be appreciated greatly. Thanks in advance.