Question

我有HTML行项目（在左列中），这些词会用单词来决定在另一个div（中列）中显示哪个图像。
这是一个订单项示例：

<li><a href="" onClick="showPic(this.innerHTML)">pngName</a></li>

中心div显示为：

<div id="fcenter"></div>

在我的JavaScript中，我写：

function showPic(picName) {
   var img = new Image();
   img.src = '/pics/'+picName+'.png';  // get name 
   var middlePanel = document.getElementById("fcenter");
   img.onload = function() {
      middlePanel.appendChild(img);
   };
}

尽管我有正确的图像名称并且指向正确的文件源，但它不会显示。

Answer 1

img.onload函数将永远不会运行，因为尚未显示图像。为了节省能源，浏览器仅加载显示的图像。因此，当您尚未显示图像时，就不必等待图像加载。

这是更新的功能...

function showPic(picName) {
   var img = new Image();
   img.src = '/pics/'+picName+'.png';  // get name 
   var middlePanel = document.getElementById("fcenter");
   middlePanel.appendChild(img);
}

显示图像后，浏览器将开始加载它。如果需要，可以在将图像添加到DOM后运行img.onload。

Answer 2

您为什么要尝试完全使用Javascript完成此操作？在这种情况下，您将处理Javascript中的click事件，并且应通过在Javascript中实现的一两行CSS访问图像。这是一个示例：

HTML

<div id="fcenter">
  <li><a href="#" onClick="showPic()">pngName</a></li>  
<div>

JavaScript

function showPic() {
  var el = document.querySelector("#fcenter");

  el.style.backgroundImage = "url('')";
}

我希望这可以帮助您解决问题。如果没有告诉我，我会尽力与您一起解决。

Answer 3

删除img.onload = function() {...}，但保留middlePanel.appendChild(img)。当您等待img到load时，实际上也包括将其附加到DOM，因此您的事件处理程序将永远不会发生，因为img从未附加到DOM。另外，如果您只想要文字，则使用.textContent代替.innerHTML会更干净。

演示

function showPic(picName) {
  var img = new Image();
  img.src = 'http://lorempixel.com/100/100/' + picName;
  var middlePanel = document.getElementById("fcenter");
  middlePanel.appendChild(img);
}

main {
  display: flex;
  justify-content: center;
}

img {
  display: inline-block
}

ul {
  font: 400 32px/2 Consolas;
  width: 30%;
  list-style: none
}

section {
  width: 50%;
}

<main>
  <ul>
    <li><a href="#/" onClick="showPic(this.textContent)">people</a></li>

    <li><a href="#/" onClick="showPic(this.textContent)">animals</a></li>
  </ul>
  <section id="fcenter"></section>
</main>

如何在Div中添加/替换图像

3 个答案:

演示