javascript - HTML loadImage.onload behaves different for IE8 and Firefox/Chrome

christiaan
christiaan used Ask the Experts™
on
I've got a simple HTML calling the function album()
<html><head></head><body><script>
<!--
album ();
//-->
</script>
</body></html>


/*
The intention is to have the following table, displaying pictures of a list in centre34, while
the size of each picture is maximized, without need for scrolling
a hoovering mouse allows to click forward or reverse
To debug I used a trick to show every line-number that is processed
 
It works fine  in Mozilla and Chrome, where the sequence is followed as wanted:
1. set-up table
2. call setPicture()
 2.1 call displayJPG ()
   2.1.1 setSize (); (actuallay run)
    2.1.1.1 definemaxSizesOfPic()
    2.1.1.2 calculate sizes
    2.1.1.3 set usemap and picture in right size (cannot see that actually happening, but the line numbers appear all)
   2.1.2 set usemap and test-picture for right-sizing
3. html level is ready now => executed and thus triggers setPicture, loading the image (as per line 88 or 122)
4. setPicture executed and when hoovering the showNext and showPrev work, when clicking the next or previous picture is shown


In IE8 however, the steps 2.1.1.1 - 2.1.2 are skipped and the result is that the incorrect usemap is loaded. Apparently the javascript instruction loadImage.onload = setSize () makes the routine jump back to HTML level.

I would like to find out what the difference is between IE8 and the others with respect to the behavior here.

*/


/*
* ------------------------------------------------------------------------------------
* || left1 (labels)        ||     center1 (Region and Date) || right1 (up-links)   ||
* || < marginWidth >  ||                                                 || < marginWidth >  ||
* ------------------------------------------------------------------------------------
* ||                  center2 (Picture Place and Description)                            ||
* -----------------------------------------------------------------------------------
* || left3 (previous)   ||                                                  || right3 (next)       ||
* ----------------------||   center34 (Region and Date)   ||----------------------
* || left4 (linklist) ||                                                         ||  right4  (linklist)  ||
* ---------------------------------------------------------------------------------
* || left5 (filedate) ||       center5 (Webstat)                   || right5  (???)       ||
*  ------------------------------------------------------------------------------------
*/

function album()
{
//      set-up of the above sketched table
//      conversion of a list of filenames with a specific format to an array of data
             * example filename: yyyy-mm-dd Region,nnnn,Place!description.ext

          setPicture ();
}


function setPicture()      //uses global picNr
{
      //ensure picture number inside series
      if ( picNr > lastOfPics) { picNr = 0}
      else if ( picNr < 0) {picNr = lastOfPics}
      //check and react on picture type
      if (listOfPictureTypes[ picNr ] == "jpg") {displayJPG();return true;};
      if (listOfPictureTypes[ picNr ] == "swf") {displaySWF();return true;};
}



function displayJPG ()       //uses global picNr
{

  loadImage.src = listOfPictures[ picNr ];
  loadImage.name = listOfPictures[ picNr ];
  loadImage.onload = setSize ();                  //setSize is executed here

    useMap = "<Area " +
      "onClick = 'nextPicture();return true;'" +
      "onMouseOver = 'showNext ();return true;'" +
      "onMouseOut  = 'showBlank();return true;'" +
      "SHAPE='rect' COORDS='" + maxWidthOfPic * 3/4 + ",0," + maxWidthOfPic + "," + maxHeightOfPic +
      "' HREF='#top' Title='Next Picture'>" +
      "<Area " +
      "onClick = 'prevPicture();return true;'" +
      "onMouseOver = 'showPrev ();return true;'" +
      "onMouseOut  = 'showBlank()';return true;'" +
      "SHAPE='rect' COORDS='0,0," + maxWidthOfPic * 1/4 + "," + maxHeightOfPic +
      "' HREF='#top' Title='Previous Picture'>";


//load small picture in window to get its size
      document.getElementById('center34').innerHTML = "<img src='" + loadImage.src +
      "' onload='setSize();return true;'" +
      " width='20'>";

      document.getElementById('left1').innerHTML =   text1;
      // etc. for all other cells
}


function setSize()       //actual width and height of the picture and maximum width and height of the window
{
      // 1. determine the actual maximum sizes of center34, the cell where the picture is displayed
      //maxWidthOfPic and maxHeightOfPic
      definemaxSizesOfPic();  //calculates the maximum width and heightin "center34" (maxWidthOfPic and maxHeightOfPic)
      
      // 2. determine the own size (width and height) of the picture
      widthOfPic = widthOfDisplayedPic = loadImage.width;
      heightOfPic = heighthOfDisplayedPic = loadImage.height;
      if (widthOfDisplayedPic > maxWidthOfPic)
      {
            widthOfDisplayedPic = maxWidthOfPic;
            heighthOfDisplayedPic = heightOfPic * widthOfDisplayedPic/widthOfPic;
      }
      if (heighthOfDisplayedPic > maxHeightOfPic)
      {
            heighthOfDisplayedPic = maxHeightOfPic;
            widthOfDisplayedPic = widthOfPic * heighthOfDisplayedPic/heightOfPic
      }

// display the picture in the right size
      document.getElementById('center34').innerHTML = "<map id='mymap' name='nav-map'>"+ useMap + "</map>"+
      "<div  style='position: relative;" +
      "top: 0px; height: " + maxHeightOfPic + "px; width:" +  maxWidthOfPic + "' >" +
      //the Picture
      "<IMG style='z-index: 0;position: relative;top: 0px;left: 0px' iD='thepicture' SRC='" +
      loadImage.src + "' BORDER=0 " +
      "width ='" + widthOfDisplayedPic +
       "'>" +
      //the navigation Arrows
      "<IMG style='z-index: 1;position: absolute;top: 0px;left: 0px' iD='arrows' SRC='FW-RW-blank.gif'" +
      "BORDER=0 USEMAP='#nav-map' alt='Blank'" +
      "width ='" + maxWidthOfPic + "' height ='" + maxHeightOfPic + "'>" +
      "</div>";extraInfoDisplay (" - 316 - last of setSize: small picture loaded");
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Expert
Top Expert 2009
Commented:
you are correct when you state in the code "executed here". You need to remove the () from setSize() because you want it to execute when the pic loads and not when you assign the event handler. Now you set onload to the result of setSize() instead of replacing the onload with setsize. So onload=setSize;

Author

Commented:
I'm not sure if the comment was really correct, as it did not work when I changed onload=setSize(); into onload=setSize;
But it put me on the track to re-arrange the sequences.
I  now first simply only load the test-picture:
(document.getElementById('center34').innerHTML = "";)
and finish the call from the HTML.
Then the ' onload='setSize();return true;' triggers setSize(), which uses the loadImage.width and loadImage.height to calculate the to-be-used width for the actual "". It also loads the information for the usemap and the data in left1, center1 and center2.

That works now well in FireFox,Chrome and IE8.

Thanks for the expertise.

Christiaan
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Well from my phone it was hard to see what could be the problem, however the onload=setSize(); was for sure wrong - perhaps not needed at all but for sure wrong ;)
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

Author

Commented:
Dear mplunqian,

I'm puzzled, as I do not quite get the way this works (in fifferent browsers).

In http://articles.techrepublic.com.com/5100-10878_11-5214317.html I see "my"construction:

// set what happens once the image has loaded
objImage.onLoad=imagesLoaded();

In http://www.siteexperts.com/tips/basics/ts01/page5.asp I see:

function DoLoad() {
  var loadImage = new Image
  loadImage.src = "/gifs/insided.gif"
}

window.onload = DoLoad;


So both appear, with and without "()".


Michel PlungjanIT Expert
Top Expert 2009

Commented:
This is DOUBLY wrong and will do nothing

objImage.onLoad=imagesLoaded();

should be

objImage.onload=imagesLoaded;

since the event handler is all lowercase so all you did was to create a new attribute called onLoad which does nothing and set it to the result of a function

Author

Commented:
Well, it is not what I did, it is a copy of the mentioned website:

http://articles.techrepublic.com.com/5100-10878_11-5214317.html .
just compare this to the site http://www.siteexperts.com/tips/basics/ts01/page5.asp 

Just to illustrate why I'm puzzled on how this works..........


What I try to show is that there are differences on two internet sites talking about the onload issue and as I have no way of telling which one is correct I'm confused by them.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial