Question

我正在创建一个以热图形式显示数据的页面。将图像写入页面的脚本每秒运行一次。当我从实时数据绘图时，热图每秒更新非常重要。

问题是我的图像闪烁。我怎样摆脱那闪烁？

我无法缓存它，因为我需要更改它。如果图像闪烁无法停止，是否可以进行一些平滑过渡？

<script type="text/javascript" charset="utf-8">
function toggle (mainImage, backupImage) {
    //$("#imagecontainer").load("./php/sarimage.png");

    var refreshId = setInterval(function() {
    var ele = document.getElementById(mainImage);
    var imageEle = document.getElementById(backupImage);
    var randomnumber=Math.floor(Math.random()*101);
    var source ="./php/sarimage.png?dummy=";
     source = source.concat(randomnumber);
            imageEle.src = source;
    $("#imagecontainer").load(source);
    ele.src= imageEle.src;
    }, 1000);
    $.ajaxSetup({ cache: false });
    }

</script>

Answer 1

看起来您正在使用JavaScript向图像提供SRC URL，每秒运行一次AJAX调用以获取新数据。我怀疑由于网络延迟，图像可能会闪烁 - 需要花一点时间才能下载新的图像数据，然后进行更新。

您可以尝试在脚本中引入一秒钟的延迟。使用两个图像，一个在屏幕上显示当前显示的数据，一个在屏幕外。将新鲜信息加载到屏幕外图像。然后，交换两个图像的位置（屏幕熄灭，屏幕外亮）。由于新数据将加载到视口外的图像中，因此下载不会明显发生。只需将其移动到位，就不应有明显的闪烁。

它会像这样（这是伪代码，不一定会运行）。首先，一些HTML - 只是几个图像。

<img src="initial.png" alt="heatmap" class="heatmap onscreen" />
<img src="loading-area.png" alt="heatmap" class="heatmap" />

然后是一些CSS：

/* By default heatmaps are off screen. */
.heatmap { position: absolute; left: -999em; }

/* But then we override that for ones marked as on screen. */
.heatmap.onscreen { position: static; left: auto; }

最后是一些JavaScript。

var firstRun = true;

function loadNewImage(){
    // Download fresh image and load it into an image OFF SCREEN.
    var imagePath = '/path/to/image.png?dummy='+Math.floor(Math.random()*101);
    $(".heatmap:not(.onscreen)").attr("src", "imagePath");
}

function updateImage(){
    if(firstRun){
        // The first time this function runs, load new data ...
        loadNewImage();

        // Now make a note that the function has run already.
        firstRun = false;

        // And return without doing anything else.
        return false;
    } else {
        // The off screen image has fresh data by this time.  Swap it.
        $(".heatmap:not(.onscreen)").addClass("next");

        // Remove the onscreen class from the current image, so it
        // moves off screen.
        $(".onscreen").removeClass("onscreen");

        // Add onscreen to the next one, moving it into place.
        $(".next").addClass("onscreen");

        // Remove the "next" class from the newly displayed image.
        $(".next").removeClass("next");

        // Load more image data.
        loadNewImage();
    }

    // Lastly, call this same function again in a second.
    window.setTimeout(updateImage, 1000);
}

$(document).ready(function(){
    // Start the swapping.
    updateImage();
});

假设您有一个合理的快速和可靠的连接，那样的事情应该照顾由网络延迟引起的闪烁。它确实引入了一秒钟的延迟 - 当前显示的图像将始终比实时时间晚一秒。但如果实时同步对您很重要，那么HTML / CSS / JavaScript可能是错误的工具。

如果你的闪烁有其他原因，那么，祝你好运。

如何阻止热图闪烁？

1 个答案: