Image() onLoad 不等待图像加载答案

【问题标题】：Image() onLoad not waiting for image to loadImage() onLoad 不等待图像加载
【发布时间】：2011-05-10 04:44:07
【问题描述】：

我已经解决了居中和调整大小的问题，但我仍然无法让 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>

【问题讨论】：

有趣的是，它似乎确实可以在 Chrome 中运行，但不能在 IE 或 Firefox 中运行。显然脚本在分配 onLoad 之前就从缓存中提取了？在显示另一个图像时预加载图像可能是我最好的选择。如果有人可以为我提供一些可能加快速度的示例代码，我将不胜感激，我对 Javascript 还很陌生。不过已经很晚了，我要去睡觉了。

标签： javascript image slideshow

【解决方案1】：

这是我的一些想法（都是公开讨论）...

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

希望这会有所帮助！ :)

【讨论】：

我能够弄清楚居中和调整大小。我现在使用 onLoad 事件来触发使 div 容器出现的动画效果，但无论我尝试哪种配置，这似乎都不起作用。我认为 onLoad 事件应该等待图像被加载，然后它会触发你想要的代码。预先加载一张图片听起来也是个好主意，你能提供一些示例代码吗？请参阅上面的更新代码！

【解决方案2】：

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

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

【讨论】：