Как я могу остановить мерцание моей тепловой карты? - PullRequest
Новая
       17

Как я могу остановить мерцание моей тепловой карты?

1 голос
/ 15 августа 2011

Я делаю страницу, которая отображает данные в виде тепловой карты.Скрипт, который записывает изображение на страницу, запускается каждую секунду.Поскольку я строю графики из реальных данных, очень важно, чтобы тепловая карта обновлялась каждую секунду.

Проблема в том, что мое изображение мерцает.Как я могу избавиться от этого мерцания?

Я не могу кешировать его, так как мне нужно его изменить.Если мерцание изображения не может быть остановлено, можно ли получить плавный переход? 

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

1 Ответ

1 голос
/ 16 августа 2011

Похоже, что вы вводите URL-адрес SRC для изображения, используя JavaScript, который запускает вызов 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, вероятно, не тот инструмент для работы.

Если есть какая-то ДРУГАЯ причина для вашего мерцания, хорошо, удачи.

...