Javascript图像预加载器不显示状态

Question

我把一个图像预加载器组合在一起工作正常，但不起作用的是在每个已加载的图像之后更新状态。 相反，所有图像都被加载并且“完成”（最后一行）是唯一出现的图像。 当我使用alert而不是innerHTML命令时，它确实有效，但这显然没有用。 我究竟做错了什么？

<div id="preloader">
<span id="preloader_status"> </span>
<script language="JavaScript">
    imageObj = new Image();
    images = new Array();
    images[0]="bigimage.gif"
    images[1]="anotherbigimage.gif"
    /* and so on */

    var i = 0;
    var o = (images.length);

    for (i=0;i<o;i++) {
        var status = (Math.round(100*(i/o)));
        imageObj.src=images[i];
        document.getElementById("preloader_status").innerHTML = status;
    }
    document.getElementById("preloader_status").innerHTML = "done";
 </script>
 </div>

Answer 1

for循环几乎立即发生，因为图像异步加载; 设置imageObj.src只会启动图像请求并继续下一步。 它不会阻止循环的执行。 这将导致您看到的效果，即代码的最后一行立即执行。

我认为您正在寻找的是JavaScript Image onload事件，它会在图像加载完毕后触发。

var image = new Image();
image.onload = function() {
    // always called
    alert('image loaded');
};
image.src = 'image.jpg';

代码受到了本文的限制 。

Answer 2

要显示图像加载进度，您需要挂钩图像的onload事件，以便跟踪其加载实际完成的时间。 图像是异步加载的，所以指定.src只能加载图像。 直到稍后onload处理程序时才会完成。 因此，您的现有代码将立即显示“已完成”，因为它不会在图像实际完成加载时进行跟踪。

此外，您连续将新的.src值分配给同一图像对象，该图像对象将中止先前的图像加载。 您需要为要加载的每个新图像创建一个新的图像对象。

您可以像这样修复代码：

<div id="preloader">
<span id="preloader_status"> </span>
<script language="JavaScript">
    var imageSrcs = [
        "bigimage.gif",
        "anotherbigimage.gif"
        /* and so on */
    ];

    function preloadImages(list, statusID) {
        var img, cnt = 0;
        var progress = document.getElementById(statusID);
        var preloads = [];

        for (var i = 0; i < list.length; i++) {
            img = new Image();
            img.onload = function() {
                ++cnt;
                var loadPercent = Math.round(100*(cnt/list.length));
                progress.innerHTML = loadPercent;
                if (cnt == list.length) {
                    progress.innerHTML = "done";
                }
            }
            img.src = list[i];
            preloads.push(img);
        }
    }

    preloadImages(imageSrcs, "preloader_status");
 </script>
 </div>