Javascript图像预加载程序没有't显示状态

Javascript image preloader doesn't show status

本文关键字：显示 状态 图像 加载 程序 Javascript      更新时间：2023-09-26

我组装了一个图像预加载程序，它运行良好，但不起作用的是在加载每个图像后更新状态。相反，所有图像都已加载，并且"完成"（最后一行）是唯一显示的内容。当我使用警报而不是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>

要显示图像加载进度，您需要挂接到图像的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>

for循环几乎会立即发生，因为图像加载是异步的；设置CCD_ 5将只是开始图像请求并继续到下一个。它不会阻止循环的执行。这将导致您所看到的效果，即代码的最后一行将立即执行。

我认为您正在寻找的是JavaScript Image onload事件，当图像完成加载时，该事件将触发。

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

代码是从这篇文章中截取的。

相关文章：