Question

我已经找到了居中和调整大小的问题，但我仍然无法使onLoad正常工作。有人有主意吗？我认为onLoad应该在释放代码之前等待图像完全加载。就像现在这样，它会为下一个img调整img的大小，并在加载之前淡入它，因此前一个图像再次淡入。一旦节目经历了一次，它就能完美地运行，所以很明显它不会在发射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

以下是我的一些想法（这是所有公开讨论）......

预加载 - 由于您仅限于并行下载2个资源每个主机名，因此预先加载所有内容可能没有意义。既然是幻灯片，那么如何修改image（）以通过未附加到DOM的Image对象下载i + 1图像？在幻灯片放映设置中预取i + 2及更高版本似乎没有什么好处。
图像居中 - 关于使用自动边距宽度进行水平居中，我相信您必须明确设置图像显示：块。显然，这并不能解决垂直居中问题。所有图像都是相同的大小吗？另外，slideShowImg div是否有定义的高度/宽度？如果是这样，那么可以应用一些数学来实现居中。

希望这有帮助！：）

Answer 2

好的，所以我修复了onLoad的问题，我甚至添加了一些预加载来帮助幻灯片放映。我所要做的就是首先定义onload，然后除了在onload的函数中定义src之外做其他所有事情。然后我添加了一些nextImg预加载，因此即使浏览器第一次加载它们，图像之间也没有什么打嗝。 以下是任何有类似onload问题并在此处找到方法的人的最终代码：

<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>

Image（）onLoad不等待图像加载

2 个答案: