javascript - 如果图像标签是用 javascript 编写的并且需要用户输入，图像是否不会随页面一起加载？

Question

我想要一种仅在需要时加载图像的方法，但对使用 AJAX 犹豫不决。相反，这样的东西会起作用吗？

<div onclick="loadimages()">Section Title</div>
<script type="text/javascript">
function loadimages()
{
    document.write('<img src="images/thumbnail1.jpg" />');
    document.write('<img src="images/thumbnail2.jpg" />');
    document.write('<img src="images/thumbnail3.jpg" />');
}
</script>

目的是当单击该 div 时图像出现在“部分标题”下方，并且仅在此时加载图像。

Answer 1

如果您想动态地将元素添加到 DOM，有几种选择比令人厌恶的 document.write 更可取。例如，您可以这样做:

var image = document.createElement("img");
image.src = "images/thumbnail1.jpg";

var parent = document.getElementById("foo"); // identify the parent somehow
parent.appendChild(image);

或者你可以这样做:

var parent = document.getElementById("foo"); // identify the parent somehow
parent.innerHTML += '<img src="..." />';

或者，如果您使用 jQuery:

$("your selector here").append('<img src="..." />');