时间戳

首页 > 解决方案 > 刷新时图像不会停止闪烁

javascript - 刷新时图像不会停止闪烁

问题描述

我已经查看并尝试了许多解决此问题的方法，但没有任何效果。我有一个网站上的图像需要每秒更新 10-30 倍（实时视频源），所以我有 javascript 每 100 毫秒请求一次图像。当图像保持不变时，没有闪烁。当图像发生变化时，我看到图像闪烁 2-3 秒。

    function initImg() {
        var canvas = document.getElementById("diagimg");
        var context = canvas.getContext("2d");
        img = new Image();
        img.onload = function() {
            var scale = .73;
            canvas.setAttribute("width", 640*scale);
            canvas.setAttribute("height", 480*scale);
            context.scale(scale, scale); //scale it to correct size
            context.drawImage(this, 0, 0);
        }
        img.onerror = function() {
            img.src="images/wait.jpeg"; //if error during loading, display this image
        }
        refreshImg();
    }
    function refreshImg() {
        img.src = "images/IMAGE.png?time="+new Date().getTime();
        window.setTimeout("refreshImg()", 100);
    }
    initImg();

标签： javascripthtmlcss

解决方案

我已经将您的代码变成了一个示例来测试这种行为，但我根本看不到任何闪烁。闪烁是否可能是由服务器端代码引起的？

let images = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Mercury_in_color_-_Prockter07-edit1.jpg/220px-Mercury_in_color_-_Prockter07-edit1.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/PIA23791-Venus-NewlyProcessedView-20200608.jpg/220px-PIA23791-Venus-NewlyProcessedView-20200608.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/220px-The_Earth_seen_from_Apollo_17.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/220px-OSIRIS_Mars_true_color.jpg'
];
let i = 0;

function getImage() {
  i++;
  if (i >= images.length)
    i = 0;
  return images[i];
}

//--------------------------------------

function initImg() {
  var canvas = document.getElementById("diagimg");
  var context = canvas.getContext("2d");
  img = new Image();
  img.onload = function() {
    var scale = .73;
    canvas.setAttribute("width", 640 * scale);
    canvas.setAttribute("height", 480 * scale);
    context.scale(scale, scale); //scale it to correct size
    context.drawImage(this, 0, 0);
  }
  refreshImg();
}

function refreshImg() {
  img.src = getImage() + "?time=" + new Date().getTime();
  window.setTimeout("refreshImg()", 500);
}
initImg();
<canvas id="diagimg" />

推荐阅读