JavaScript: Load Images in a div after clicking a button
Question
I have a hidden div (by using max-height and transition) that show up when I click a button. This div contains several images that load up when you first load the site. I would like them to load when I click the button to show the div, to make the site lighter.
<!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>
4 answers
solution1
11 ACCPTED 2016-07-27 11:25:22
I would suggest using an attribute on the img tags to store the intended src attribute, then apply it on the button click. This would avoid having to maintain a list of src urls in your JavaScript.
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'); } }
.class1 { max-height:0px; transition:max-height 1s; overflow:hidden; }
<button onclick="show()">Show Images</button> <hr> <div id="id1" class="class1"> <img data-src="https://picsum.photos/400/200" alt=""> <img data-src="https://picsum.photos/400/200" alt=""> <img data-src="https://picsum.photos/400/200" alt=""> <img data-src="https://picsum.photos/400/200" alt=""> </div> <hr>
solution2
1 2016-07-27 11:22:04
Here's the working fiddle https://jsfiddle.net/6ve7ub79/
You can do it easily using 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;
}
solution3
0 2016-07-27 11:15:37
try this 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>
solution4
0 2016-12-02 11:51:56
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.