dynamisches Bild Laden Google Chrome

Question

Ich habe eine neue Frage über das Ausführen von JavaScript auf meiner Website und wie Bilder geladen werden.

Im Wesentlichen entwickelte ich eine Seite, die eine einfache, Bildschirm-Rechnung für einen kleinen Geschäftseigentümer erzeugt. Der Besitzer kann zu der Seite gehen, auf eine Schaltfläche klicken und sie werden nach einer Vielzahl von Eingaben gefragt, um die Rechnung auszufüllen. Sie werden gebeten, ein Bild für ihr Logo, eine Liste der Arbeiten, die sie gemacht haben (&, was sie berechnet haben), Kontaktinformationen unten und mehr einzugeben.

Es ist primitiv und ich weiß, es gibt viele Dienste da draußen, die das professionell machen, aber ich besitze ein kleines Geschäft & wollte HTML & JS lernen.

Mein besonderes Problem ist, wie das Logo-Bild angezeigt wird, wenn der Benutzer die URL eingibt. Der JS fragt nach der Logo-URL, nachdem der Benutzer auf die Schaltfläche Start geklickt hat. Dann fragt das Skript den Benutzer, ob sie mit dem angezeigten Bild zufrieden sind (d. H. Größe &).

Wenn ich die Website auf IE11 lade, wird das Bild angezeigt, sobald der Benutzer die URL eingibt. Auf diese Weise können sie sofort sehen & entscheiden, ob sie damit zufrieden sind oder nicht. Das Problem ist, wenn ich es in Google Chrome starte, wird das Bild erst geladen, wenn das gesamte Programm zur Erstellung von Rechnungen ausgeführt wurde. Mit anderen Worten, das Bild wird erst angezeigt, wenn alle JS-Skripte ausgeführt wurden, aus denen das Programm besteht.

Unnötig zu sagen, dass dies meine Benutzer auf einen Versuch beschränkt, ihr Logo anzuzeigen, da sie es erst auf dem Bildschirm sehen, wenn das Programm vorbei ist. Warum wird es sofort in IE 11, nicht aber in Chrome angezeigt, und wie kann ich es sofort in Chrome anzeigen lassen (wenn möglich)?

Der Link zu der Seite ist Generate Invoice

Hier ist der JS-Code, der für das Bild fordert, zeigt es und wieder Größen als der Benutzer mag.

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."); 
} 

Vielen Dank für Ihre Gedanken oder Eingaben.

Answer 1

Es könnte sein, dass Chrome darauf wartet, dass das Bild vollständig geladen wird, bevor es einen Reflow des Dokuments durchführt (= bevor es das Layout aktualisiert). Da das JavaScript viel schneller ausgeführt wird, als das Bild möglicherweise geladen wurde, werden Sie das Bild erst sehen, wenn das JS fertig ist.

Sie könnten versuchen, das Ereignis onload an das Bild anzuhängen, das nach dem Laden des Bildes ausgelöst wird. So verwenden

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

Und dann den Rest des Codes innerhalb einer separaten Funktion

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

Hoffnung, das hilft!