2016-05-21 19 views
1

私のウェブサイトでJavaScriptを実行し、画像がどのように読み込まれるかについての初心者の質問があります。動画の読み込みgoogle chrome

本質的に、私は中小企業の所有者のための簡単な画面上の請求書を生成するページを開発しました。所有者はページに移動してボタンをクリックし、インボイスに入力するためのさまざまな入力を求められます。彼らは自分のロゴの画像、彼らがした仕事のリスト(彼らが請求したもの)、下の連絡先などを入力するよう求められます。

これは基本的なことですが、専門的にこれを行うサービスがたくさんあることはわかっていますが、私は小規模ビジネスを持っています&は、& JSを学びたいと思っていました。

私の特に問題は、ユーザーがURLを入力したときのロゴ画像の表示方法です。ユーザがスタートボタンをクリックすると、ロゴのURLが表示されます。次に、表示されている画像に満足するかどうかを確認するスクリプトが表示されます(図形&のサイズ)。

IE11でサイトを読み込むと、ユーザーがURLを入力するとすぐにイメージが表示されます。この方法で、彼らはすぐにそれを見ることができます&彼らはそれに満足しているかどうかを決定します。問題は、Google Chromeで実行すると、請求書生成プログラム全体が実行されるまでイメージが読み込まれないことです。つまり、プログラムを構成するすべてのJSスクリプトが実行されるまで、イメージは表示されません。

言うまでもなく、これは、プログラムが終了するまで、画面上に表示されないため、ユーザーがロゴを表示しようとする試みに制限されていることは言うまでもない。なぜIE 11ではすぐに表示されますが、Chromeでは表示されません。また、できるだけすぐにChromeに表示するにはどうすればよいですか?

ページへのリンクはここGenerate Invoice

ある画像に対して求められJSコードであり、ユーザが好きなように、それは、再サイズを表示します。

var url = prompt("Enter the URL for a picture of your logo:"); 

// create the IMG element to display the logo 
var image = document.createElement("IMG"); 

// assign the user-input url to the variable holding the IMG element 
image.src=url; 

// Create a variable to assign the DIV to (by ID) 
var imageLogo = document.getElementById("addLogoAndMessage"); 

// Clear out the DIV (i.e. make the button go away) 
imageLogo.innerHTML = ""; 

// Append the image to the variable associated with the DIV 
imageLogo.appendChild(image); 

// custom width for CE logo is 220px 
var logoWidth = prompt("Set a width for your logo."); 
var logoWidth1 = logoWidth + "px"; 
imageLogo.appendChild(image).style.width = logoWidth1; 

// custom height for CE logo is 200px 
var logoHeight = prompt("Set a height for your logo. To maintain aspect ratio, just hit Enter."); 
var logoHeight1 = logoHeight + "px"; 
if (logoHeight == "" || logoHeight == "undefined") { 
    imageLogo.appendChild(image).style.height = "auto"; 
} else { 
    imageLogo.appendChild(image).style.height = logoHeight1; 
} 

var sizeOK = prompt("Are you happy with the shape and size of your logo (y/n)?"); 

while (sizeOK != "n" && sizeOK != "y") { 
    sizeOK = prompt("Are you happy with the shape and size of your logo (y/n)?"); 
} 

while (sizeOK == "n") { 
    var logoWidth = prompt("Set a new width for your logo."); 
    var logoWidth1 = logoWidth + "px"; 
    imageLogo.appendChild(image).style.width = logoWidth1; 

    var logoHeight = prompt("Set a new height for your logo. To maintain aspect ratio, just hit Enter."); 
    var logoHeight1 = logoHeight + "px"; 
    if (logoHeight == "" || logoHeight == "undefined") { 
     imageLogo.appendChild(image).style.height = "auto"; 
    } else { 
     imageLogo.appendChild(image).style.height = logoHeight1; 
    } 

    // Ask after every width,height set so user can stop when they like the image 
    sizeOK = prompt("If you're still not happy with your logo, enter 'n'. Otherwise, just hit Enter."); 
} 

ありがとうございました。

答えて

0

イメージの読み込みが完了してからドキュメントをリフローする前に(レイアウトを更新する前に)Chromeが待機することがあります。 JavaScriptは、イメージがロードした可能性があるよりもはるかに高速に実行されるため、JSが終了するまでイメージは表示されません。

ロード完了後に起動する画像にonloadイベントを追加してみることができます。だから、

image.onload = imageHasLoaded; 
image.src = url; 

を使用し、助け別々の機能

function imageHasLoaded() { 
    //the rest of your code, to be executed once the image is displayed 
} 

・ホープ内のコードの残りの部分を置きます!

関連する問題