javascript - Image() onLoad 不等待图像加载

Question

我已经解决了居中和调整大小问题，但我仍然无法让 onLoad 正常工作。有人有主意吗？我认为 onLoad 应该在触发代码之前等待图像完全加载。现在，它会调整下一个图像的大小，并在加载之前将其淡入，因此上一个图像会再次淡入。一旦节目运行一次，它就会完美地工作，所以显然它不会在触发 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', {
                    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>

Answer 1

这是我的一些想法(都是公开讨论)...

1. 预加载 - 由于每个主机名只能并行下载 2 个资源，因此预先预加载所有内容可能没有意义。既然它是幻灯片，那么修改 image() 以通过不附加到 DOM 的 Image 对象下载 i + 1 图像怎么样？在幻灯片设置中预取 i + 2 及以上似乎没有什么好处。

2. 图像居中 - 关于使用自动边距宽度进行水平居中，我相信您必须明确将图像设置为 display:block。显然这并不能解决垂直居中的问题。所有图像的大小都相同吗？另外，slideShowImg div 是否有定义的高度/宽度？如果是这样，那么可以应用一些数学来实现居中。

希望这有帮助! :)