JavaScript：单击按钮后在 div 中加载图像
Posted
技术标签:
【中文标题】JavaScript：单击按钮后在 div 中加载图像【英文标题】：JavaScript: Load Images in a div after clicking a button 【发布时间】：2016-12-01 08:46:32 【问题描述】：我有一个隐藏的 div（通过使用最大高度和过渡），当我单击按钮时会显示。此 div 包含在您首次加载站点时加载的多个图像。我希望它们在我单击按钮以显示 div 时加载，以使网站更轻。
<!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" >
<img src="img2.jpg" >
<img src="img3.jpg" >
<img src="img4.jpg" >
</div>
<hr>
</body>
</html>【问题讨论】：
使用延迟加载并相应地加载它们，这将有助于即兴发挥。 【参考方案1】：我建议在 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" >
<img data-src="http://lorempixel.com/400/200" >
<img data-src="http://lorempixel.com/400/200" >
<img data-src="http://lorempixel.com/400/200" >
</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');
代码笔 - http://codepen.io/anon/pen/KrZvpJ
【讨论】：
@joe 这对我有用，但如果我放入自己的图像，它只会显示第一个而不能转到下一个。如果我摆脱了高度，那么你可以看到它们，但为什么它不能通过它们旋转？与通过 lorempixel 图像相比，我认为它是在本地完成的。 不看你的代码很难说。它可能与代码中的其他内容存在样式冲突。此处显示图像的方法是任意的，您可以轻松地use display css property 代替。如果您无法找到解决方案，我建议您将自己的问题发布到 ***，您更有可能得到更多人的回复。【参考方案2】：这是工作小提琴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="" >
<img class="i2" src="" >
<img class="i3" src="" >
<img class="i4" src="" >
</div>
<hr>
CSS
.class1
transition:max-height 1s;
【讨论】：
我需要更通用的东西来处理大量图像，但是谢谢。【参考方案3】：试试这个代码
<!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" ><img src="img2.jpg" ><img src="img3.jpg" ><img src="img4.jpg" >';
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>
【讨论】：
这在示例中有效，但实际代码更复杂。还是谢谢。 你可以在 iframe 中调用单独的文件【参考方案4】：<!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" >
<img src="img2.jpg" >
<img src="img3.jpg" >
<img src="img4.jpg" >
</div>
<hr>
</body>
</html>【讨论】：
请不要发布裸代码，同时解释代码的作用。以上是关于JavaScript：单击按钮后在 div 中加载图像的主要内容，如果未能解决你的问题，请参考以下文章
我在UIWebView中加载Web视图，我需要单击网站上的登录按钮
Ajax 在 div 中加载页面内容，但在右键单击时保持“在新选项卡中打开”
Angular JS：单击按钮后如何在特定元素中加载 Angular js 部分视图页面