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

更改图像时闪烁

1 个答案: