2017-09-18 4 views
0

私は、その場で新しいドキュメントを作成し、イメージを表示する必要があります。画像のURLは変数として関数に渡されます。Javascript:メモリにイメージをロードして新しいドキュメントに表示する

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()を実装する方法がわかりません。親切に助けてください!

+0

なぜwindow.openを使用しないのですか?イメージにパスを渡すことができ、ウィンドウサイズAFAIKを指定することもできます。 https://www.w3schools.com/jsref/met_win_open.asp –

+0

画像がロードされていないときにネットワークパネルから通知される内容は何ですか? – Kaiido

答えて

0

することはできいずれか

  1. プリロードImageオブジェクトと画像とブラウザは、画像データ、それ
  2. プリロードをキャッシュBASE64に変換し、新しいウィンドウのHTMLにそのデータを置くことを願っています。

方法2は多くのコードであり、実際にはプリロードが100%時間をかけなければならない場合にのみ必要です。だからここ

は方法1:

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

コールpreloadWin('folder/image.jpg')とイメージがロードされると、それは、ウィンドウを開く必要があります。

+0

キャッシングをカウントしないようにするには、メインウィンドウで作成した読み込んだHTMLImageを新しいウィンドウに直接追加することもできます: 'function newWin(url){ var strg = '<!DOCTYPE html> '; var myWindow = window.open( ""、 "MsgWindow"、 "width = 600、height = 400"); myWindow.document.writeln(strg); myWindow.document.body.appendChild(img); } ' – Kaiido

+0

@Kaiidoそれはさらに優れています。どのように私はそれを考えなかったのですか? –

関連する問題