<Img> - onLoad 1

[SH4F33]

Hello everybody, Im having some issues with the onload event of images.

I have some thumbnails, and when I click on any of them, a row displaying "Loading..." will have its 'display' property set to '' from none, at the same time, an image which has a blank gif will load the larger image.

When the larger image has been loaded, the "Loading..." row will have its display property set to none on the image's onLoad event. It works fine as long as I click on different thumbnails each time.

But if I click on the same thumbnail twice, the "Loading" row will not have its display property change to none on the second click.

Roughly here's the layout:

Thumb1 | Thumb2 | Thumb3 | Thumb4 ...
======================================
<tr id="theMess" style="display:none">...
               LOADING...          
</tr>
======================================
<img id="hdContainer"...
              LARGER IMAGE

======================================

And here's part of the code I'm working on

The thumbnail(s):

<a href="#" class="xxx" onclick="hdContainer.src='path/big.jpg';document.getElementById('theMess').style.display='';return false;"><img src="path/small.jpg" /></a>

The larger image:

<img id="hdContainer" src="path/blank.gif" onLoad="document.getElementById('theMess').style.display='none'" />

I guess, when clicking on the tumbnail twice, on the 2nd time, the cached image will be loaded, but still, and image is being loaded, but onLoad="document.getElementById('theMess').style.display='none'" is not being triggered.

Thanks for any input.

 

[tchatzi]

try it tis way and let me know if there is any problem

<script language="javascript">
  var loadedPhoto;
  function loadPhoto(myphoto){
    if ( loadedPhoto == myphoto ) {
      return false;
    }
    else {
      document.getElementById('theMess').style.display='visible';
      document.getElementById('hdContainer').src='path/' + myphoto + '_big.jpg';
      loadedPhoto = myphoto;
      return false;
    }
  }
</script>

<a href="#" class="xxx" onclick="loadPhoto(('photo1');"><img src="path/photo1.jpg" style="border:none;" /></a>
<a href="#" class="xxx" onclick="loadPhoto(('photo2');"><img src="path/photo2.jpg" style="border:none;" /></a>
<a href="#" class="xxx" onclick="loadPhoto(('photo3');"><img src="path/photo3.jpg" style="border:none;" /></a>

<tr id="theMess" style="display:none;">...
               LOADING...          
</tr>

<img id="hdContainer" src="path/blank.gif" onLoad="document.getElementById('theMess').style.display='none'" />

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

 

[SH4F33]

Thanks a bunch man. Clever function.
Cheers.