javascript - 更改图像时闪烁

Question

所以我的 HTML 正文中有

<a id="Hal9000">

我也有这个功能

function Hal(MSG){
document.getElementById("Hal9000").innerHTML = "<img src=\"+preloadImage("HAL9000.php?Text="+MSG)+"\"\>";
}
function preloadImage(url){
var img=new Image();
img.src=url;
return url;
}

因此 Hal(MSG) 会定期调用，以使用从 HAL9000.php 生成的新 Hal9000 来更新页面。每次调用该函数并更改页面时，整个屏幕都会闪烁。

在页面加载时预加载不太可行，并且尝试加载所有不同的 Hal9000 图片会很困难。

有没有办法可以从 HAL9000.php 中提取图像，然后预加载并替换？

Answer 1

因此，您可以预加载新图像并在加载后替换它:

function Hal(MSG){
    preloadImage("HAL9000.php?Text="+MSG)
}

function preloadImage(url){
    var img=new Image();
    img.src=url;
    img.onload = function(){
        document.getElementById("Hal9000").innerHTML = '<img src="'+url+'" \>';
    }
}

或者您可以将当前 src 设置为图像的 css 背景以防止闪烁。

function Hal(MSG){
    var container = document.getElementById("Hal9000")
    var img = container.getElementByTagName('img')[0]
    var src = 'HAL9000.php?Text='+MSG
    if(!img)
        container.innerHTML = '<img src="'+src+'" \>';
    else{
        img.style.backgroundImage = 'url('+img.src+')'
        img.style.backgroundSize = '100% 100%'
        img.src = src
    }
}