JavaScript：单击按钮后在 div 中加载图像答案

【问题标题】：JavaScript: Load Images in a div after clicking a buttonJavaScript：单击按钮后在 div 中加载图像
【发布时间】：2016-12-01 08:46:32
【问题描述】：

我有一个隐藏的 div（通过使用最大高度和过渡），当我单击按钮时会显示。此 div 包含在您首次加载站点时加载的多个图像。我希望它们在我单击按钮以显示 div 时加载，以使网站更轻。

<!DOCTYPE html>
<html>
<head>
  <style>
    .class1 {
      max-height:0px;
      transition:max-height 1s;
      overflow:hidden;
    }
  </style>
  <script>
    function show() {
      document.getElementById('id1').style.maxHeight = "200px";
    }
  </script>
</head>
<body>
  <button onclick="show()">Show Images</button>
  <hr>
	
  <div id="id1" class="class1">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
    <img src="img4.jpg" alt="">
  </div>
	
  <hr>
</body>
</html>

【问题讨论】：

使用延迟加载并相应地加载它们，这将有助于即兴发挥。

标签： javascript html image web load

【解决方案1】：

我建议在 img 标签上使用一个属性来存储预期的 src 属性，然后在按钮单击时应用它。这将避免必须在 JavaScript 中维护 src url 列表。

HTML

<button onclick="show()">Show Images</button>
<hr>

<div id="id1" class="class1">
  <img data-src="http://lorempixel.com/400/200" alt="">
  <img data-src="http://lorempixel.com/400/200" alt="">
  <img data-src="http://lorempixel.com/400/200" alt="">
  <img data-src="http://lorempixel.com/400/200" alt="">
</div>

<hr>

function show() {
  document.getElementById('id1').style.maxHeight = "200px";
  var images = document.querySelectorAll("#id1 img");
  for(var i = 0; i < images.length; i++)
  {
    images[i].src = images[i].getAttribute('data-src');
  }
}

代码笔 - http://codepen.io/anon/pen/KrZvpJ

【讨论】：

@joe 这对我有用，但如果我放入自己的图像，它只会显示第一个而不能转到下一个。如果我摆脱了高度，那么你可以看到它们，但为什么它不能通过它们旋转？与通过 lorempixel 图像相比，我认为它是在本地完成的。
不看你的代码很难说。它可能与代码中的其他内容存在样式冲突。此处显示图像的方法是任意的，您可以轻松地use display css property 代替。如果您无法找到解决方案，我建议您将自己的问题发布到 stackoverflow，您更有可能得到更多人的回复。

【解决方案2】：

这是工作小提琴https://jsfiddle.net/6ve7ub79/

你可以使用 jQuery 轻松做到这一点

jQuery

$(document).ready(function(){
$('button').bind('click', function(){
$('.i1').attr('src', 'img1.jpg');
$('.i2').attr('src', 'img2.jpg');
$('.i3').attr('src', 'img3.jpg');
$('.i4').attr('src', 'img4.jpg');
});
});

HTML

<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img class="i1" src="" alt="">
<img class="i2" src="" alt="">
<img class="i3" src="" alt="">
<img class="i4" src="" alt="">
</div>
<hr>

CSS

.class1 {
  transition:max-height 1s;
}

【讨论】：

我需要更通用的东西来处理大量图像，但是谢谢。

【解决方案3】：

试试这个代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .class1 {
      max-height:0px;
      transition:max-height 1s;
      overflow:hidden;
    }
  </style>
  <script>
    function show() {
      document.getElementById('id1').innerHTML= '<img src="img1.jpg" alt=""><img src="img2.jpg" alt=""><img src="img3.jpg" alt=""><img src="img4.jpg" alt="">';
      document.getElementById('id1').style.maxHeight = "200px";
    }
  </script>
</head>
<body>
  <button onclick="show()">Show Images</button>
  <hr>

  <div id="id1" class="class1">

  </div>

  <hr>
</body>
</html>

【讨论】：

这在示例中有效，但实际代码更复杂。还是谢谢。
你可以在 iframe 中调用单独的文件

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
  <style>
    .class1 {
      max-height:0px;
      transition:max-height 1s;
      overflow:hidden;
    }
  </style>
  <script>
    function show() {
      document.getElementById('id1').style.maxHeight = "200px";
    }
  </script>
</head>
<body>
  <button onclick="show()">Show Images</button>
  <hr>
	
  <div id="id1" class="class1">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
    <img src="img4.jpg" alt="">
  </div>
	
  <hr>
</body>
</html>

【讨论】：

请不要发布裸代码，同时解释代码的作用。