緩存通過PHP/AJAX/JSON/jQuery加載的動態圖像

我會盡量在這裏儘可能地透徹。緩存通過PHP/AJAX/JSON/jQuery加載的動態圖像

我正在使用的應用程序使管理員能夠創建文件夾，然後將照片上傳到該文件夾中。該顯示與Pinterest相似，它將所有照片加載到一個屏幕上拼貼。當你在那裏只有5到6張照片時，它是完美的，但這很少會發生。一旦你開始在那裏獲得更多的照片，它開始變得更慢。另一件事是，無論何時刪除圖片或重新輸入該文件夾，整個顯示都必須重新加載。我需要一些緩存這些圖像的方法。

這裏是我的腳本的邏輯：

在dashboard.php，有兩個JavaScript包括：homepageActions.js和fileManager.js。 homepageActions.js有一個document.ready()腳本，它調用一個javascript函數showFiles()。

所以基本上，要更簡潔一些，只要文檔加載，功能showFiles()被調用。該功能如下所示：

function showFiles(directoryName) { 
    $.ajax({ 
    url: 'displayRecords.php', 
    type: 'post', 
    data: ({directoryName:directoryName}), 
    dataType: 'json', 
    success: function(data) { 
     constructTable(data); 
     $(document).find("a[rel*='lightbox']").lightBox(); 
    } 
    }); 
}

此功能具有傳遞給它的文件夾路徑。從那裏開始，AJAX腳本調用一個查看該文件夾的PHP腳本，並獲取該文件夾中所有目錄和圖像的列表。然後構造一個JSON字符串，其中包含最初傳入的文件夾中每個子文件夾和圖像的詳細信息。一旦該腳本成功返回，將調用另一個函數constructTable(data)，該函數將JSON字符串傳遞給該函數。

這裏是事情開始有點毛茸茸的地方。

constructTable()函數有大約240行代碼，我不會在這裏包含它，因爲它很難遵循。總而言之，該函數解析JSON字符串，確定哪些條目是目錄，哪些條目是文件。它從中創建兩個數組：一組文件夾和一組文件。

首先我處理所有的文件夾，並相應地顯示它們。這部分是好的，我不擔心。

然後，我開始瀏覽圖像。對於每個圖像，我基本上都是圍繞它編寫大量的代碼。每個圖像周圍都有div，鏈接和其他HTML標記。但長話短說，我有一個for ... next循環，它查看每個文件路徑（從JSON中收集），然後構造一長串HTML，然後使用jQuery將其附加到DIV中。因此，最終的最終看起來是這樣的：

for (var a = 0; a < numPhotos; a++) { 
    photoCode += "<div id='outside-container-"+a+"'>"; 
    photoCode += "<a rel='lightbox' class='photo-link' href='"++"'>"; 
    photoCode += "<img src='http://" + rootURL + "/uploads/"+fileNameArray[a] + "' width='200' class='photo-thumb'/></a>"; 
    photoCode += "</div>"; 

    $("#column1").append(photoCode); 
}

現在 - 正如我以前說過，當只有一對夫婦的文件夾中的照片，這是沒有問題的。但是，當我們開始進入更高的數字時，它就成了一個問題。所以 - 據說，有什麼方法可以將這些照片存儲到瀏覽器緩存中，以便在初始加載後更快地加載這些照片？

來源

2012-03-21 John Hubler

是JavaScript進程變慢或圖像加載？ – 2012-03-21 18:53:13

@拉斐爾 - 我覺得這個過程變慢了。例如，當我點擊一個文件夾時，要加載照片顯示，我必須一個接一個地觀看照片。這些照片正好在那裏出現，所以它不像我正在觀看緩慢的照片加載進程......但是，等待100張照片加載，每張照片都需要大約一秒鐘的時間，這是不可取的。我已經考慮採取稍微不同的方法，並在我的儀表板。php文件，創建幾百個空圖像標籤，然後通過js填充src屬性 - 但我不確定這是最好的方法。 – 2012-03-21 20:29:57

我不相信這是你的JavaScript變得緩慢，因爲你的代碼不是太重......檢查我的答案 – 2012-03-21 21:12:13

所以..這個問題不僅原因之一，讓我們對他們說：]

的JavaScript函數運行時阻止頁面：功能運行時，所有的頁面撐受阻直到它停止運行。一般來說，它需要幾毫秒的時間，而且它不會被人類感知，但是當你在一個循環內部有一個艱難的過程時，它可能需要幾秒鐘，然後纔會清晰可見。
大圖像加載時間可能過長：由於文件越大，文件加載時間越長;如果您有100張圖片，且圖片的大小爲5MB，則需要花費時間來加載所有圖片（它們不會並行加載）。
Parallel文件加載：browsers has a limit number for requests on each host（any.thing.com）;因此，如果您嘗試在同一個主機中加載100個圖像（www.yourhost.com/images/#{imgname），則無法並行加載所有圖像，瀏覽器將執行可能的請求數一個主機然後排隊所有其他主機。

好了，現在你知道了很多請求頁面的HTTP問題，讓我們去解決方案：d

的JavaScript塊：這是不是你的情況，但對於解決這個你應該打破javascript的同步性。怎麼樣？
- 刪除循環;
- 使用循環內的代碼構建函數;這個函數應該接收元素的列表和索引;
- 在你的新功能，你將只與接收的索引的單元工作，然後再調用函數（如遞歸性）增加指標，並使用setTimeout功能（這將打破同步）
大圖像：解決它很容易;這個解決方案的關鍵是用拇指代替真實的圖像。您可以使用@MichalPlško建議的腳本（phpThumb）。此外，您應該限制您加載的圖片數量，並按需加載更多圖片，例如Pinterest（使用自動加載進行分頁）。
並行文件加載：這應該是你真正的問題;這不是太容易，但它不是解決問題的地獄：D你只需要創建一些子域名，並讓它們指向正確的位置，如img01.yourdomain.com指向你的圖像文件夾或類似的東西。

來源

2012-03-21 21:03:40

您可以通過使用名爲phpThumb()的腳本來改善緩存行爲。它可以即時生成縮略圖圖像，還可以處理服務器和瀏覽器中圖像的緩存。從項目網站：

縮略圖可以緩存以減少服務器負載。任何源圖像的多個大小可以單獨緩存。當（本地）源圖像被修改時縮略圖會自動更新

因此，如果您認爲您的問題可能是由縮略圖創建，圖片緩存等類似問題引起的，請嘗試一下。我用這個很好的結果。

來源

2012-03-21 19:18:50 Michal

緩存通過PHP/AJAX/JSON/jQuery加載的動態圖像

回答

相關問題