如何加快jQuery圖庫？

我在網頁上工作，我試圖加快在圖庫中加載圖像的時間。您可以查看這裏的畫廊：如何加快jQuery圖庫？

www.imagethrow.com/design-studio-all-throws.html

這是畫廊的HTML部分：

<a class="imgLink" href="path-to-the-image.jpg">Image name</a> 
<img src="" id="theImage">

的jQuery：

<script> 
$(document).ready(function(){ 
    $('.imgLink').click(function(){ 
     var imgPath = $(this).attr('href'); 
     $('#theImage').attr('src',imgPath); 
     return false; 
    }); 
});

的圖片已優化/壓縮我已經實現了緩存控制設置。我會很感激任何建議。

感謝

來源

2014-04-04 user3237758

您可以通過預加載來改善它。您可以選擇全部預加載，也可以在用戶懸停在鏈接上時預加載它們。

$(document).ready(function(){ 
    $('.imgLink').click(function(){ 
     var imgPath = $(this).attr('href'); 
     $('#theImage').attr('src',imgPath); 
     return false; 
    }).one("mouseenter",function(){ 
     var img = createElement("img"); 
     img.src = $(this).attr('href'); 
    }); 
});

甚至會更好，如果你可以把它啓動的時候用戶將鼠標懸停附近的鏈接，而不是等待，直到他們真正在鏈接本身懸停預壓。

來源

2014-04-04 21:35:06

我會試試這個......當用戶懸停在鏈接附近或預加載所有鏈接時，上面的代碼是用於預加載的嗎？ – user3237758

它在用戶懸停在鏈接上時預加載。如果它們點擊的速度非常快，或者需要幾秒鐘的時間才能加載，它們在完成加載之前可能仍會點擊。 –

我在哪裏放置代碼？我是否會替換原始評論中發佈的當前代碼？ – user3237758

JPG格式，而不是代替巴巴新

使用JPG圖片。像http://www.imagethrow.com/img/design-studio/2.5_Layer_Throw/Little_Caesars.png這樣的圖片如果以高質量（80）jpg保存，可以很容易地從380KB恢復到大約100 KB。

請注意，Jpg不支持透明度，所以您必須使圖片中的透明邊呈白色。

此外Jpg是有損的，這意味着保存圖片時會有少量細節丟失。但這幾乎不可知，尤其不適用於圖片。此外，您可以玩耍並選擇文件大小和質量之間的最佳平衡。

WebP的

如果仍然是不夠的，你可以嘗試WebP，由谷歌一個全新的圖像格式，但顯然它不是由目前所有瀏覽器都支持，所以不認爲你應該開始使用這個，或者只是作爲最後的手段和適當的回退。

預加載

從

除此之外，你可能會預載的圖片。這意味着你開始在後臺加載所有的圖像。不過，我不會爲這樣的畫廊推薦它。用戶可能無法打開每個圖像，並且預加載佔用大量帶寬。特別是對於有限（移動）數據計劃的用戶，如果您在後臺下載多個兆字節的圖像，甚至不想看到它們，這不是很好。

來源

2014-04-04 21:31:43 GolezTrol

如何加快jQuery圖庫？

回答

相關問題