1

I have this situation:

<div id="main_image">
<img src="images/big_image.png" alt="big image" width="300" height="300" />
</div>
<div id="thumbnails">
<a href="images/big1.png"><img src="images/thumb1.png" alt="thumb 1" /></a>
<a href="images/big2.png"><img src="images/thumb2.png" alt="thumb 2" /></a>
<a href="images/big3.png"><img src="images/thumb3.png" alt="thumb 3" /></a>
</div>

I change the big image src like this code:

$("#thumbnails a").hover(function() {
$("#main_image img").attr("src",$(this).attr("href"));
});

Before showing the new image, i want to show on the main_image div a loading image, beacuse like this script, if the new image is to big i must wait to render. How can i solve this situation?

Tnx

FOUND IT:

$('#additionals_image_carousel li a').mouseover(function() {
            var href = $(this).attr("href");

            $("#productMainImage img").fadeOut(function() { 
                $(this).load(function() { $(this).fadeIn(); }); 
                $(this).attr("src", href); 
            }); 
    });

and #productMainImage has a loading image as centered background

jQuery fade to new image

Community
  • 1
  • 1
benzo
  • 55
  • 2
  • 12
  • 1
    http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading – billyonecan Apr 13 '12 at 10:47
  • How to integrate http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading with my example? – benzo Apr 13 '12 at 10:58

2 Answers2

1
  1. add loading gif image
  2. don't assign the loading actin every time the mouseover actin fired

html:

<img id="loading" src="/images/loading.gif" style=" display: none;"/>

js:

var img = $("#productMainImage img"); 
var loadImg = $("#loading");

$('#additionals_image_carousel li a').mouseover(function() { 
    img.hide(); 
    loadImg.show(); 
    img.attr("src", $(this).attr("href"));
});

img.load(function() { 
    loadImg.hide(); 
    $(this).fadeIn(); 
});
rasha-saeed
  • 51
  • 6
0

I have not tested it but give it a try , place this div in the main image

<div id="load"><img src="images/loading.gif"/></div>

#load
{
display:none;
}

Then do something like this

$("#thumbnails a").hover(function() {
$("#load").css('display','inline');
});
Priyank Patel
  • 6,898
  • 11
  • 58
  • 88
  • I want to show loading image before show complete rendered image, not only show a div with loading image. I want to do something like this http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading but i don't know the best way working for my example. – benzo Apr 13 '12 at 11:09
  • @benzo did you try it , what happens when you do that – Priyank Patel Apr 13 '12 at 11:10
  • Can you check the new solution i've changed on post? It not works on ie7 :( – benzo Apr 13 '12 at 13:30