Image() onLoad not waiting for image to load

I've figured out the centering and resizing issues, but I still can't get onLoad to work properly. Anyone have any ideas? I thought onLoad was supposed to wait for the image to be loaded completely before firing the code. As this is right now, it resizes the img for the next img, and fades it in before it's loaded, so the previous image fades in again. Once the show has run through once, it works perfectly, so obviously it's not waiting for the image to load completely before firing imageLoad().

<div id="slideShow">
    <div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;">
    </div>
    <div id="slideShowThumbs">
    </div>
    <script type="text/javascript">
        loadXMLDoc('http://www.thehoppr.com/hopspots/82/82.xml', function() {
            var slideShow = document.getElementById('slideShow');
            var items = [];
            var nl = xmlhttp.responseXML.getElementsByTagName('image');
            var i = 0;
            var t;
            var slideShowImg = document.getElementById('slideShowImg');
            var slideShow = document.getElementById('slideShow');
            var maxHeight = 300;
            var maxWidth = 800;
            var imgNode = new Image();


            function image() {
                var nli = nl.item(i);
                var src = nli.getAttribute('src').toString();
                var width = parseInt(nli.getAttribute('width').toString());
                var height = parseInt(nli.getAttribute('height').toString());
                imgNode.onLoad = imageLoad();
                imgNode.src = src;
                imgNode.height = height;
                imgNode.width = width;
                imgNode.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;");

                var ratio = maxHeight / maxWidth;
                if (imgNode.height / imgNode.width > ratio) {
                    // height is the problem
                    if (imgNode.height > maxHeight) {
                        imgNode.width = Math.round(imgNode.width * (maxHeight / imgNode.height));
                        imgNode.height = maxHeight;
                    }
                } else {
                    // width is the problem
                    if (imgNode.width > maxHeight) {
                        imgNode.height = Math.round(imgNode.height * (maxWidth / imgNode.width));
                        imgNode.width = maxWidth;
                    }
                }
            }

            function imageLoad() {
                slideShowImg.appendChild(imgNode);
                Effect.Appear('slideShowImg', {
   开发者_StackOverflow                 duration: 1
                });

                t = setTimeout(nextImage, 7000);
            }

            function nextImage() {
                slideShowImg.setAttribute("style", "display:none");
                if (i < nl.length - 1) {
                    i++;
                    image();
                } else {
                    i = 0;
                    image();
                }
            }

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //XML Loaded, create the slideshow
                alert(xmlhttp.responseText);
                image();
            }
        });
    </script>

---

Here are some of my thoughts (it's all open discussion)...

1. Preloading - Since you're limited to downloading 2 resources in parallel per hostname, it may not make sense to preload everything up front. Since it's a slideshow, how about modifying image() to download the i + 1 image through an Image object that doesn't get appended to the DOM? It doesn't seem beneficial to prefetch i + 2 and beyond in a slideshow setting.

2. Centering the images - Regarding using the auto margin width for horizontal centering, I believe you'll have to explicitly set the image to display:block. Obviously that doesn't solve centering vertically. Are all the images the same size? Also, will the slideShowImg div have a defined height/width? If so, then some math can be applied to achieve the centering.

Hope this helps! :)

---

Ok so I fixed the issue with the onLoad, and I even added a little preloading to help the slideshow along as well. All I had to do was define the onload first, and then do everything else except define the src inside the onload's function. I then added a little nextImg preloading so there's little if no hiccup between images even if it's the first time the browser is loading them. Here's the final code for anyone who has similar onload issues and finds there way here:

<div id="slideShow">
    <div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;">
    </div>
    <div id="slideShowThumbs">
    </div>
    <script type="text/javascript">
        loadXMLDoc('/82.xml', function() {
            var slideShow = document.getElementById('slideShow');
            var items = [];
            var nl = xmlhttp.responseXML.getElementsByTagName('image');
            var i = 0;
            var t;
            var slideShowImg = document.getElementById('slideShowImg');
            var slideShow = document.getElementById('slideShow');
            var maxHeight = 300;
            var maxWidth = 800;
            var curImg = new Image();
            var nextImg = new Image();

            function image() {
                var cli = nl.item(i);
                var src = cli.getAttribute('src').toString();
                var width = parseInt(cli.getAttribute('width').toString());
                var height = parseInt(cli.getAttribute('height').toString());
                curImg.onload = function() {
                    curImg.height = height;
                    curImg.width = width;
                    curImg.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;");
                    slideShowImg.appendChild(curImg);
                    var ratio = maxHeight / maxWidth;
                    if (curImg.height / curImg.width > ratio) {
                        // height is the problem
                        if (curImg.height > maxHeight) {
                            curImg.width = Math.round(curImg.width * (maxHeight / curImg.height));
                            curImg.height = maxHeight;
                        }
                    } else {
                        // width is the problem
                        if (curImg.width > maxHeight) {
                            curImg.height = Math.round(curImg.height * (maxWidth / curImg.width));
                            curImg.width = maxWidth;
                        }
                    }
                }
                curImg.src = src;
                if (i < nl.length - 1) {
                    var nli = nl.item(i + 1);
                    var nsrc = nli.getAttribute('src').toString();
                    nextImg.src = nsrc;
                }
                Effect.Appear('slideShowImg', {
                    duration: 1
                });

                t = setTimeout(nextImage, 7000);
            }

            function imageLoad() {}

            function nextImage() {
                slideShowImg.removeChild(curImg);
                slideShowImg.setAttribute("style", "display:none");
                if (i < nl.length - 1) {
                    i++;
                    image();
                } else {
                    i = 0;
                    image();
                }
            }

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //XML Loaded, create the slideshow
                alert(xmlhttp.responseText);
                image();
            }
        });
    </script>