JavaScript: Charger les Images dans un div après avoir cliqué sur un bouton

J'ai un div caché (à l'aide de max-height et de transition) qui s'affiche quand je clique sur un bouton. Cette div contient plusieurs images qui se chargent lorsque vous chargez d'abord le site. Je tiens à charger lorsque je clique sur le bouton pour afficher le div, afin de rendre le site plus léger.

HTML:

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

Utiliser le chargement paresseux et de les charger en conséquence, il va aider à l'improvisation performence.

InformationsquelleAutor Tanasis | 2016-07-27

10

Je vous recommande d'utiliser un attribut sur les balises img pour stocker le but attribut src, puis l'appliquer sur le bouton cliquez sur. Cela permettrait d'éviter d'avoir à maintenir une liste de src url dans votre JavaScript.

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>
```
JS
```
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');
  }
}
```
Code de pen - http://codepen.io/anon/pen/KrZvpJ
- Merci il a bien fonctionné.
- cela fonctionne pour moi, mais si je l'ai mis dans mes propres images, il n'affiche que la première et ne peut pas passer au suivant. Si je me débarrasser de la hauteur, alors vous pouvez tous les voir, mais pourquoi ne pas en faire pivoter à travers eux? Je suppose que quelque chose avec elle être effectuée localement par rapport à passer par le lorempixel images.
- C'est difficile à dire sans voir votre code. Il pourrait être un style conflit avec quelque chose d'autre dans votre code. La méthode de montrer les images ici est arbritrary, vous pourriez tout aussi bien l'utilisation afficher les propriété css à la place. Si vous ne parvenez pas à trouver une solution je vous recommande de poster votre propre question à stackoverflow, il est plus probable que vous obtiendrez des réponses de plus de personnes.
InformationsquelleAutor Joe

Voici le travail de violon https://jsfiddle.net/6ve7ub79/

Vous pouvez le faire facilement à l'aide de 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;
}

J'ai besoin de quelque chose de plus générique pour gérer un grand nombre d'images, mais merci.

InformationsquelleAutor Hitesh Misro

essayer ce code

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

Cela fonctionne dans l'exemple, mais le code est plus compliqué. Merci quand même.
vous pouvez appeler seprate de fichiers dans un iframe

InformationsquelleAutor Amit Kumar Pawar

HTML:

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

Merci de ne pas poster nu code, également fournir une explication de ce que fait le code.

InformationsquelleAutor sachin

Vous devez vous connecter pour publier un commentaire.