javascript - Divへの画像の動的な読み込み

Question

最初はCSSで非表示になっている「メニュードロップダウン」divに表示されるプロファイル画像のリストがあります。ページの読み込み時間を短縮するために、各メニュー項目を選択したときにこれらの画像を動的に（リストとして）読み込みたいと思います。これはどのように可能ですか？

Answer 1

使用してみてください：

$("#divID").html("<img  style='position:absolute' src='path/to/the/ajax_loader.gif'>");

ajax を使用している場合:

    function sendAjax()
    {
        $("#divID").html("<img  style='position:absolute' src='path/to/the/ajax_loader.gif'>");

         // you ajax code

        $("#divID").html(ajaxResponse);
    }

document.getElementById('divID').innerHTMLの代わりに使用することもできます$("#divID").html()。それも正常に動作します

この方法を使えば、CSS で div を非表示にする必要はありません。ajax応答後に自動的に削除されます。

Answer 2

さて、あなたはこれを試すことができます：

<div id="desiredDiv">
</div>
<script>
var images = [
    'http://www.example.com/img/image1.png',
    'http://www.example.com/img/image2.png',
    'http://www.example.com/img/image3.png',
    ...
];
for(var i=0; i<images.length; i++) {
    $('#desiredDiv').append('<img src="'+images[i]+'" alt="" />');
}
</script>

Answer 3

HTMLでは、各画像タグのsrc属性を省略します。代わりに、data-srcという属性を追加し、それに画像のURLを指定します。

次に、メニューが表示されたら、次のスクリプトを実行します。

$('.menu-class img').each(function() {
    $(this).attr('src', $(this).data('src'));
});

上記のスクリプトをまだ持っていない場合は、jqueryが必要です

Answer 4

画像のリストを JavaScript 変数に保持できます。

var images = [
    'http://www.example.com/img/image1.png',
    'http://www.example.com/img/image2.png',
    'http://www.example.com/img/image3.png',
    ...
];

次に、イメージ タグを作成することで、必要なときにいつでもイメージをロードできます。

var i = 0; // the index of the image in the list
var $img = $( '<img>' ).attr({'src':images[i]});

画像を div に追加するだけで、ブラウザによって自動的に読み込まれます。