Question

我有一个关于在我的网站上运行JavaScript以及图片如何加载的新手问题。

基本上，我开发了一个页面，可以为小型企业所有者生成简单的屏幕发票。所有者可以转到页面，单击按钮，并要求他们输入各种输入来填充发票。他们要求输入图片作为他们的徽标，他们所做的工作清单（以及他们收取的费用），底部的联系信息等等。

它是原始的，我知道那里有很多专业的服务，但我拥有一家小企业和一家小企业。想要学习HTML＆amp; JS。

我的特殊问题是用户输入网址时徽标图片的显示方式。用户单击开始按钮后，JS会提示输入徽标URL。然后，脚本询问用户他们是否对所显示的图像（即形状和大小）感到满意。

当我在IE11上加载网站时，只要用户输入网址，图像就会显示。通过这种方式，他们可以立即看到它。决定他们是否对此感到满意。问题是，当我在谷歌浏览器上运行时，图像不会加载，直到整个发票生成程序运行。换句话说，在执行构成程序的所有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.");
}

感谢您的任何想法或意见。

Answer 1

可能是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
}

希望有所帮助！

动态图片加载谷歌铬

1 个答案: