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

问题描述：

我有一个隐藏的div（通过使用max-height和transition），当我点击一个按钮时，它会显示出来。这个div包含几个图片，当你第一次加载网站时会加载。我希望他们加载时，我点击按钮显示div，使网站更轻。JavaScript：单击按钮后在图片中加载图片

<!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> 
 
\t 
 
    <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> 
 
\t 
 
    <hr> 
 
</body> 
 
</html>

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

答

我会建议使用的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

感谢它工作正常。 – Tanasis

答

试试这个代码

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

这适用于该示例，但实际代码更复杂。不管怎么说，还是要谢谢你。 – Tanasis

你可以在iframe中调用seprate文件 –

答

这里的工作小提琴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; 
}

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

答

<!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> 
 
\t 
 
    <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> 
 
\t 
 
    <hr> 
 
</body> 
 
</html>

请不要发布裸露的代码，也请提供解释代码正在做什么。 –

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

相关推荐