Javascript 带有预加载、加载问题的图像刷新

Question

我有一个小的 *.html 文件显示并定期更新 *.png 文件。为了防止在重新加载期间闪烁，我在代码中预加载图像。

虽然我观察到，在某些引用期间（似乎是随机的），图像仅显示部分（下部的 1/2 到 1/3 是空白）并且需要延迟才能完成加载。

我怎样才能避免这种情况？

index.html

<html>
<body onload="update();">
    <script src="update.js"></script> 
    <div id="container">    
       <img id="img_display" src="my_image.png"/>
    </div>
</html>

update.js

function update() {
    update_image();
    setTimeout(update, 1000);
}

function update_image() {
    //timestamp as random identifier
    var timestamp = new Date().getTime();
    //create image path, appending timestamp to force reload of image instead of using chached version
    var s_src = "my_image.png?random=" + timestamp;
    // preload image to prevent flashing
    var img = new Image();
    img.src = s_src;
    // get img container ID
    var s_id = "img_display";
    // refresh source parameter
    document.getElementById(s_id).src = s_src;
}

Answer 1

在update.js

/*代替*/

function update() { update_image(); setTimeout("update();", 1000); }

/*使用*/

function update() { setTimeout(function(){ update_image(); }, 1000); }

Javascript 带有预加载、加载问题的图像刷新

Javascript image refresh with preload, loading issues

html

javascript

preload