預加載/加載大圖像的最快方法

Question

預載可能不是正確的術語......

我有一個頁面加載一個非常大的圖像。 我想等待大圖像完全加載，然后在用戶的頁面上顯示。

目前，我有一個加載GIF，我正在使用javascript等待圖像加載，然后用圖像替換加載gif src：

<img src="loading.gif" id="image" />
<script>
img = 'very_large_image.jpg';
var newimg = new Image();
newimg.src = img;
newimg.onload = function(){
$('#image').attr('src',img);
}
</script>

我想知道是否有更快的方法來加載此圖像，如純CSS方式或某種方式迫使瀏覽器首先下載此資產。 上面的代碼顯然位於圖像預期加載的位置。 所以上面和下面都有代碼。

我認為一個CSS選項是將圖像放在屏幕上，一旦加載，執行src替換。

我的服務器正在運行http2，所以應該很快。 我只是想知道是否有更好的方法，然后我現在正在做的是確保以最快的方式為所有主流瀏覽器加載大圖像。

我應該補充一點，我已經對圖像文件進行了大量優化。 我正在使用高分辨率攝影。

謝謝！

Answer 1

你可以讓JPG漸進，然后讓它加載。 瀏覽器將逐漸顯示圖像，然后加載更多細節。

這是最好的方法，因為用戶甚至可以在完全加載之前看到圖像。

編輯：在Linux上使用jpegtran ，在Windows上使用Photoshop或RIOT

Answer 2

你干得好！

這是我想出的：

https://jsfiddle.net/Vandeplas/jkwweh52/

HTML：

<img src="http://loadinggif.com/images/image-selection/32.gif" large-src="http://www.planwallpaper.com/static/images/518079-background-hd.jpg" large-class="fancyImg">

JS：

$('img[large-src]').each(function() {
  var img = $(this);
  var newimg = new Image();
  newimg.src = img.attr('large-src');
  newimg.setAttribute('class', img.attr('large-class'));
  newimg.onload = function() {
   img.replaceWith(newimg);
  };
});

這將JS與HTML +分開，您可以輕松添加無限更多的預加載圖像，而無需更改js！

Answer 3

非常簡單的方法來預加載以后需要的圖像

$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

Answer 4

我認為針對您的問題的最佳解決方案是拆分此圖像並同時加載部件assync