JavaScript: Laden Sie die Bilder in einen div nach dem Klick auf eine Schaltfläche

Ich einen versteckten div (mit max-height und übergang), die zeigen, wenn ich auf eine Schaltfläche klicken. Dieses div enthält mehrere Bilder, die sich laden beim ersten laden der Seite. Ich möchte Sie zu laden, wenn ich auf die Taste, um das div, um die Seite leichter.

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>

Lazy loading verwenden und laden Sie Sie entsprechend, wird es helfen, in der Improvisation, Performance.

InformationsquelleAutor Tanasis | 2016-07-27

10

Ich würde vorschlagen, mit einem Attribut des img-tags zu speichern, die vorgesehen src-Attribut, dann gilt es auf den-button klicken. Dies würde vermeiden, um eine Liste von src-urls im 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 pen - http://codepen.io/anon/pen/KrZvpJ
- Danke es hat gut funktioniert.
- dies funktioniert für mich, aber wenn ich meine eigenen Bilder, es zeigt nur den ersten und kann nicht gehe zum nächsten. Wenn ich loszuwerden die Höhe, dann sehen Sie Sie alle, aber warum wird es nicht drehen Sie durch Sie? Ich nehme an, etwas mit ihm getan wird lokal im Vergleich zu gehen durch die lorempixel Bilder.
- Es ist schwer zu sagen, ohne zu sehen, Ihren code. Es könnte ein styling Konflikt mit etwas anderes in deinem code. Die Methode, zeigen die Bilder, die hier arbritrary, könnten Sie einfach mit der css-Anzeige-Eigenschaft statt. Wenn Sie nicht in der Lage sind, eine Lösung zu finden empfehle ich die Veröffentlichung Ihrer eigenen Frage auf stackoverflow, es ist mehr wahrscheinlich, dass Sie wird erhalten Sie Antworten von mehr Menschen.
InformationsquelleAutor Joe

Hier ist die Arbeit fiddle https://jsfiddle.net/6ve7ub79/

Können Sie es leicht tun mit 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;
}

Ich brauchte etwas mehr generisch ist, um eine große Anzahl von Bildern, aber danke.

InformationsquelleAutor Hitesh Misro

versuchen, diesen 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>

Dies funktioniert in dem Beispiel, aber der eigentliche code ist komplizierter. Trotzdem danke.
Sie können rufen Sie seprate-Datei in einem 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>

Bitte posten Sie keine bloßen code, auch eine Erklärung für das, was der code tut.

InformationsquelleAutor sachin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.