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>

もう 1 つの方法は、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 に答える