PHP：divを展開するまでイメージを読み込まないでください。

Question

私のサイトでは、自分のdivにアップデート（ギャラリー）をグループ化するアップデートセクションがあります。各divは非表示になります。彼らはセクションを選択し、新しいギャラリーを表示するように展開します。

それはすべて正常に動作します。しかし、それはページの読み込み時にすべての画像を読み込みます。その結果、砂時計が私の好きな時間より長く長くなります。 divを表示させた後にイメージをロードする方法はありますか？

編集：

は一緒に行きました：

$(function() { 
     $('.collapse img').attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
     }); 
    }); 

崩壊はそれでイメージを持っているdiv要素名です。現在のdiv内の画像のみを変更するには、これをどのように変更できますか？折りたたまれたdivはすべて同じ名前です。しかし、展開すると、そのdiv内の画像だけを読み込むようにします。今、私はそれらのいずれかを展開すると、すべての崩壊したdivのすべての画像を読み込みます。

Answer 1

起動時に画像を含むことはできません。ユーザーがdivを展開すると、JavaScriptを使用して画像を読み込むことができます。

例：

function expandDiv(idOfDivElement) { 
    divObj = document.getElementById(idOfDivElement); 
    var imageObj = document.createElement('img'); 
    imageObj.setAttribute('src', 'path/example_image.jpg'); 
    divObj.appendChild(imageObj); 
    // your expand div code here 
} 

あなたはこの機能を進めると、画像のURLのための二番目のパラメータを追加することができます。複数のイメージをロードする場合は、配列/コンマ区切りの文字列を使用します。

Answer 2

画像をロードするプロセスは、ブラウザによって異なります。あなたはajaxのようなjavascriptでそのコンテンツを読み込む必要があります。

Answer 3

ajaxから画像（展開可能なdiv内）をロードすることができます。 divを表示してから、画像を取得するためにajaxを呼び出します。その後、.innerHtml()を使用するか、jQueryを使用する場合は、.html()を使用して、拡張されたdivに画像を配置します。

この場合、ajaxページでhtmlを構築する必要があります。 extpanded divにhtmlを追加するだけです。

この方法ではページをはるかに高速に読み込みます。

フィードバックをお願いします。