更改图像时闪烁

Question

So I have in my HTML body

<a id="Hal9000">

I also have this function

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

So Hal(MSG) is invoked regularly to update the page with new Hal9000 that is generated from HAL9000.php. Every time the function is invoked and the page is altered the whole screen flashes.

Preloading on page load is not very viable and trying to load all the different Hal9000 pictures would be difficult.

Is there a way I can just pull the Image from HAL9000.php then preload and replaced?

Answer 1

So you can either preload the new image and replace it after it has been loaded:

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+'" \>';
    }
}

Or you could set the current src as css background of your image to prevent flickering.

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