Question

我有一个要求，我需要动态创建一个新文档并在其中显示图像。图像的url作为变量传递给函数。

newWin('folder/image.jpg');

此功能的代码：

function newWin(url){
    var strg = '<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body>';
    strg += '<img src ="'+url+'"></body></html>';
    var myWindow = window.open("", "MsgWindow", "width=600, height=400");
    myWindow.document.writeln(strg);
}

新文档的内容还有更多内容。在第3次或第4次尝试时，图像不会一直加载或加载。如何将图像预先加载到内存中以便立即显示？我不确定如何在这种情况下实现新的image（）。请帮助！

Answer 1

你可以

使用Image对象预加载图像，希望浏览器将其缓存
预加载图像数据，将其转换为base64，并将该数据放入新窗口的HTML中。

方法2有很多代码，只有当预加载必须在100％的时间内工作时才需要。

所以这是方法1：

function preloadWin(url){
    var img = new Image()
    img.src = url
    img.onload = function (){
        newWin(url)
    }
}

调用preloadWin('folder/image.jpg')，一旦图像加载，它就会打开窗口。

Javascript：在内存中加载图片＆amp;显示在新文档中

1 个答案: