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

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

javascript html image web

JavaScript：单击按钮后在div中加载图像,javascript,html,image,web,load,Javascript,Html,Image,Web,Load,我有一个隐藏的div（通过使用max height和transition），当我点击一个按钮时会显示出来。此div包含在首次加载站点时加载的多个图像。我想他们加载时，我点击按钮，以显示div，使网站更轻 .1级{ 最大高度：0px；过渡：最大高度1s；溢出：隐藏； } 函数show（）{ document.getElementById（'id1'）.style.maxHeight=“200px”； } 显示图像试试这段代码 <!DOCTYPE html> <htm

我有一个隐藏的div（通过使用max height和transition），当我点击一个按钮时会显示出来。此div包含在首次加载站点时加载的多个图像。我想他们加载时，我点击按钮，以显示div，使网站更轻


.1级{
最大高度：0px；
过渡：最大高度1s；
溢出：隐藏；
}
函数show（）{
document.getElementById（'id1'）.style.maxHeight=“200px”；
}
显示图像

试试这段代码

<!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>


.1级{
最大高度：0px；
过渡：最大高度1s；
溢出：隐藏；
}
函数show（）{
document.getElementById（'id1'）。innerHTML=''；
document.getElementById（'id1'）.style.maxHeight=“200px”；
}
显示图像

这是工作小提琴

您可以使用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>

<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>

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

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>

<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>

显示图像

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

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');
  }
}

函数显示（）{
document.getElementById（'id1'）.style.maxHeight=“200px”；
var images=document.queryselectoral（“#id1 img”）；
对于（var i=0；i


代码笔-

.1级{
最大高度：0px；
过渡：最大高度1s；
溢出：隐藏；
}
函数show（）{
document.getElementById（'id1'）.style.maxHeight=“200px”；
}
显示图像


使用延迟加载并相应地加载它们，这将有助于提高性能。这在示例中是可行的，但实际代码更复杂。无论如何，谢谢。您可以在iFrame中调用seprate文件。我需要一些更通用的东西来处理大量图像，但谢谢。请不要发布裸代码，也请提供代码执行情况的解释。@joe这对我很有用，但如果我放入自己的图像，它只显示第一个，不能转到下一个。如果我去掉了高度，那么你可以看到它们，但是为什么它不能旋转穿过它们呢？我假设与浏览lorempixel图像相比，它是在本地完成的。如果没有看到您的代码，很难说。它可能与代码中的其他内容存在样式冲突。这里显示图像的方法是任意的，你也可以很容易地代替。如果您无法找到解决方案，我建议您将自己的问题发布到stackoverflow，您很可能会收到更多人的回复。