0

我想要一种仅在需要时加载图像的方法，但对使用 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 时图像显示在“部分标题”下方，并且仅在那时加载图像。

4

3 回答 3

1

编辑：未经测试的代码——即时输入。

document.write页面加载后不会做你想做的事，你必须对 DOM 做一些事情。

比如，也许：

<div id='section_title' onclick="loadimages()">Section Title</div>
<script type="text/javascript">
function loadimages()
{
    var pics = ['thumbnail1.jpg', 'thumbnail2.jpg', 'thumbnail3.jpg'];
    var i, img, el;
    el = document.getElementById('section_title');
    for (i = 0; i < pics.length; i++) {
      img = document.createElement("img");
      img.src = pics[i];
      el.appendChild(div);
    }
}
</script>

另一种方法是将图像放入您的 HTML 文件中，但display:none需要隐藏它们并取消隐藏。

或者，根据目的，将它们照常放在 HTML 中，然后在加载时隐藏它们，然后在需要时取消隐藏。

于 2012-09-04T08:18:28.510 回答
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="..." />');
于 2012-09-04T08:18:35.490 回答
0

当您这样做时，document.write('something'); 这something将替换您的document.

您可以做的是动态创建新元素并将它们附加到适当的位置。

于 2012-09-04T08:19:17.050 回答