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

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

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

来源

2012-04-03 user1293977

当你设置'imageObj.src =图像[I]'，它实际上将图像加载到内存中，或者它只是设置属性？ – 2012-04-03 13:44:57

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

来源

2012-04-03 13:47:39 jfriend00

耶，非常感谢你的时间！我不得不作一点修正，你在loadPercent变量中输入了一个错字： var loadPercent = Math.round（100 *（cnt/list.length））; – user1293977 2012-04-03 14:17:20

@ user1293977 - 好，我修正了这个错字。 – jfriend00 2012-04-03 14:19:16

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

我觉得你要找的是JavaScript Image onload事件，当图像有完成加载时会触发。

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

密码从this article捏。

来源

2012-04-03 13:45:10

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

回答

相关问题