javascript/jqueryの制御画像読み込み？

Question

私は画像ギャラリーを作成していますし、私は次のボタンがクリックされたときに、いくつかの画像をロードしたい.....例えば
、

$("#next").css({cursor:"pointer"}).click(function(){ 
      //load image1,image2,image3 
     }); 

HTML

<img src="image1.jpg"><img src="image2.jpg"><img src="image3.jpg"> 

私ドンこれらの画像タグは既に 'gallery' divタグに存在しています...ページが最初に読み込まれたときに読み込みを停止し、ユーザーが次のボタンをクリックすると画像が表示されますロード...ありがとう

Answer 1

画像要素がマークアップに既にある、と彼らは定義されたsrc属性を持っている場合は、ページの読み込みが開始すると、画像ファイルがダウンロードされます。

プログラムでイメージ要素を作成するか、マークアップにsrc属性を空のままにして、ユーザーが次をクリックしたときに割り当てる必要があります。

オプション1：

// on the click event... 
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'], 
    gallery = $('#gallery'); 
$.each(images, function() { 
    $('<img/>').attr('src', this).appendTo(gallery); 
}); 

オプション2：

マークアップ：クリックイベントで

<img id="img1"/> <img id="img2"/> <img id="img3"/> 

：

$('#img1').attr('src', 'image1.jpg'); 
$('#img2').attr('src', 'image2.jpg'); 
$('#img3').attr('src', 'image3.jpg'); 

編集：

遅延読み込みを話すときに別の選択肢があります。

オプション3：

あなたはあなたのイメージのsrc属性を削除し、あなたのクリックイベントで、その後、$.data機能を使用して、それを保存することができ、例えば、元の値に画像srcを復元：

$(function() { 
    // put a "defaultImage" on all images of gallery 
    // and store the original src attribute 
    $('#gallery img').each(function() { 
    $(this).data('originalSrc', $(this).src).attr('src', 'defaultImage.jpg'); 
    }); 

    $("#next").click(function(){ 
    $('#gallery img').each(function() { 
     // restore the original src attribute: 
     $(this).attr('src', $(this).data('originalSrc')); 
    }); 
    }); 
}); 

Answer 2

img要素を作成してDOMに追加します。

var img = $(document.createElement("img")); 
img.attribute("src", "image1.jpg"); 
$("#mydiv").append(img);