控制圖像加載在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"/> 

上的click事件：

$('#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);