php/Ajax - 預加載圖片的最佳做法

我已經放在一起非常像flickr照片流功能的腳本。兩個縮略圖彼此相鄰，當您單擊下一個或上一個鏈接時，下一張（或上一張）的兩張圖像將滑入。酷！php/Ajax - 預加載圖片的最佳做法

當前頁面加載時加載兩個圖像。第一次使用nxt/prv時，接下來的兩個圖像或前兩個圖像通過ajax加載，第一個圖像的id在url中傳遞，兩個新圖像的HTML通過ajax返回並顯示。

簡單，但它讓我思考，連接速度慢，或重的服務器負載，然後將兩個圖像，雖然比較小縮略圖仍可能需要一段時間來加載，並與滑動窗格的好東西是事實隱藏的數據可以在沒有加載延遲的情況下快速順利地滑入。

所以我想從一個表現和良好的做法角度來看哪個選項是最好的，這是我現在可以想到的，可以接受的建議。

1，撥打各組圖像通過JSON

2，加載所有可能的圖像變成一個JSON文件，並在細節上拉這種方式（它應該是快？） - 儘管瀏覽器仍然將不得不加載圖像。另外有時可能會有4張圖片，其他時間可能會有1000張！

3，負載10通過PHP的圖象分成一JSON或其他文件，並且所有10個圖像加載到瀏覽器中隱藏8，其不在顯示，始終表示中間的兩個。這裏的問題是，每次有人點擊時，文件必須重新加載第一張和最後一張圖片，這仍然需要時間，不過我想現在中間圖片已經通過瀏覽器緩存了。但仍然有一個加載時間。

4，是否有可能具有所有圖像細節（不管數字）的json圖像，並且使用上面的no 3來加載10個圖像，是否可以使用ajax來只讀10行並保留它讀取的最後一個指針，所以可以快速加載json文件，通過瀏覽器緩存刷新和圖像兩端的緩存！

希望明確，你有什麼建議如何處理？

來源

2008-11-02 Paul M

JSON是基於文本的傳輸格式，我認爲它不會爲預加載圖像提供任何好處？ – 2008-11-02 23:10:33

要預裝在Javascript中的圖像，你不需要做任何事情，聽起來像AJAX或JSON。所有你需要的是：

var img = new Image(); 
img.src = "http://example.com/new/image.jpg";

瀏覽器會很高興地在後臺加載圖像，即使它沒有顯示在任何地方。然後，當你更新另一個（顯示）圖像標籤的src領域，瀏覽器會立即顯示它已經加載的圖像（希望這一切）的一部分。

來源

2008-11-02 23:47:11

通過Ajax抓取JSON會讓你放慢速度。

你最好使用內聯JSON和生成的Javascript。

<?php 
     $images = array("foo.jpg","bar.jpg"); 
?> 
<script type="text/javascript"> 
    jQuery(function($){ 
     var images = (<?php echo json_encode($images); ?>); 
     /* Creating A Hidden box to preload the images into */ 
     var imgbox = document.createElement("div"); 
     $(imgbox).css({display: 'none'}); 
     /* Possible Alternative trick */ 
     /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */ 
     $('body').append(imgbox); 

     $.each(images , function(ind, item) 
     { 
      #Injecting images into the bottom hidden div. 
      var img = document.createElement("img"); 
      $(img).src("/some/prefix/" + item); 
      $(imgbox).append(img); 
     }); 
    }); 
</script>

來源

2008-11-02 23:52:41

在要同時預加載資源的數量較多的情況下，一點點AJAX可以解決問題爲您服務。只要確保緩存標題是這樣的，瀏覽器將在下一個請求中使用資源。在以下示例中，我最多同時加載四個資源。

<script> 
var urls = [ 
    "a.png", 
    "b.png", 
    "c.png", 
    "d.png", 
    "e.png", 
    "f.png" 
]; 

var currentStep = 0; 
function loadResources() 
{ 
    if(currentStep<urls.length){ 
    var url = urls[currentStep]; 
    var req = GetXmlHttpObject(); 
    update('loading ' + url); 
    req.open("GET", url, true); 
    req.onreadystatechange = getUpdateState(req, url); 
    req.send(null); 
} else { 
    window.location = 'done.htm'; 
} 
} 

function getUpdateState(req, url) { 
    return function() { 
    var state = req.readyState; 
    if (state != 4) { return; } 
    req = null; 
    setTimeout('loadResources()', 0); 
    } 
} 
</script> 

<!-- This will queue up to four concurrent requests. Modern browsers will request up to eight images at time --> 
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

來源

2009-07-02 08:39:01 brianegge

爲什麼不使用文本並用圖片代碼替換文本（在php中的作品真的很好用ajax多達500張圖片和更多）？

來源

2009-09-18 23:11:19

php/Ajax - 預加載圖片的最佳做法

回答

相關問題