JQuery的阿賈克斯，負載IMG

1 - 我試圖直接加載IMG一個IMG，這是行不通的：

$("#target").load("img.jpg");

2 - 我可以加載一個img，該在另一個html裏面。在這裏，我在div加載目標的IMG是內部IMG1內img.html：

$(function(){ 
    $("#linkajax").click(function(e){ 
     e.preventDefault(); 
     $("#target").load("img.html #img1");  
    }); 
})

是2個加載使用Ajax和jQuery或有更好，更直接的方式IMG的最佳方式？

（我使用Ajax，因爲我需要裝載大量的IMG的。我想首先加載，然後淡入快只是當用戶點擊。我這裏簡化的情況下只是爲了更好地解釋它）

來源

2013-03-07 Nrc

爲什麼你在做什麼，只是附加一張圖片。

$("#target").append("<img src='img.jpg' />");

其他方式

$('<img/>', { 
    src: 'img.jpg' 
}).appendTo("#target");

來源

2013-03-07 14:52:20 epascarello

你爲什麼需要Ajax來指代一個圖像文件？

$('#target').append('<img src="img.jpg" alt="my image"/>');

ETA：像你需要提前下載所有的圖像

$('#linkajax').on('click ', function(){ 
    $.ajax({ 
    url: "getsrcs.php", //or some script to return a JSON array 
    dataType: 'json', 
    }).done(function(data) { //where data is a JSON array like [img1.jpg, img2.jpg ...] 
     $(data).each(function(){ 
     var img = $(' < img src = "'+this+'"/> '); 
     $('#target ').append(img);//you can put your fade effect here if you like 
     }); 
    } 
); 
});

來源

2013-03-07 14:52:49 dnagirl

這是一個不錯的選擇。但是我使用Ajax，因爲我有很多img要加載。 – Nrc 2013-03-07 14:58:10

@Nrc：圖像的數量不表示。您仍然會將「」附加到您的目標。什麼ajax將是有用的是檢索一個JSON數組圖像'src's – dnagirl 2013-03-07 15:00:34

但Ajax會讓我第一次加載下一個img，當用戶點擊時，它會快速淡入 – Nrc 2013-03-07 15:07:36

在我看來，如果你想獲取通過AJAX成像路徑列表，然後像這將是適當的更快的顯示。沒有必要爲此使用ajax。只需創建一個Image對象並連續應用所有的URL。這樣，您的瀏覽器將緩存所有這些文件，並在被問及時從緩存中提供。

var img = new Image(), 
    urls = ['images/image.jpg','images/image2.jpg'], 
    imgIdx = 0; 

img.onload = function() { 
    imgIdx++; 
    if (imgIdx < urls.length) img.src = urls[imgIdx]; 
} 

img.src = urls[imgIdx];

來源

2013-03-07 15:19:22

JQuery的阿賈克斯，負載IMG

回答

相關問題