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图像刷新与预加载，加载问题

1 个答案: