Show Loading gif on hover

Question

i want to show Loading.gif into an image that i hover, i already try in css like this :

img {background:url(../images/loading.gif) no-repeat center center; }

it looks good for all images, but not working on image that i hover on.

so, try to adding a div

<div class="load"></div>

.load {background:url(../images/loading.gif) no-repeat center center; }

<div class="detailimage">   
    <img class="mainimage" src="<?php echo $base; ?>/img.php?w=600&h=600&img=images/<?php echo $datadetailproduct['images']; ?>" />
        <ul>
        <?php
            while ($datadetailthumb = mysqli_fetch_assoc($detailthumb)) {
        ?>                      
            <li>
                <img src="<?php echo $base; ?>/img.php?w=75&h=75&img=images/<?php echo $datadetailthumb['thumb']; ?>" />
            </li>
            <?php } ?>
        </ul>
    </div>

this is my jquery

$(".detailimage li img").hover(function(){
    $(".mainimage").attr("src",$(this).attr("src").replace("img.php?w=75&h=75&img=images/", "img.php?w=600&h=600&img=images/"));
    });

when i hover the thumb image, i want to show loading.gif into .detailimage img("the main image")

how to adding that jquery into my recent jquery? .show(".load")?

Solution

Maybe this can help you (pure css solution):

http://codepen.io/davidlampon/pen/KpoaNa

I simplified the html and removed all php:

<div class="detailimage">       
  <ul>             
    <li>
      <img class="load"></div>
    </li>
  </ul>
</div>

CSS (only issue here is you have to specify image dimensions):

ul {
  list-style-type: none;
}

.load {
  width: 316px;
  height: 316px;  
  background:url(http://cdn.sstatic.net/stackoverflow/img/[email protected]) no-repeat center center; 
}

.load:hover{
  background:url(http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif) no-repeat center center; 
}

Comments

[Ching Ching]

thank you Suman Barick for answering, if the image succes load on page, it will automatically hide the loading.gif? is there any solution for that?

[Suman Barick]

Do you want to show the loading.gif only if the real image is not loaded and the user still hovers on the li?

[Ching Ching]

i want user to, if they hover on the Thumbnail image will show loading.gif on the Big image. after they succesfully load, it will automatically hide the loading.gif and show the Thumbnail image on Big image.