這是在Javascript / Jquery（帶有動畫）中預加載圖像的正確方法嗎？

Question

我正在嘗試在HTML圖片加載時顯示基本動畫。

這是正確的方法嗎？

      //display the (small image) animation
      var preloader = new Image();
      preloader.src = 'img/preload.gif';
      $('#myDiv').append(preloader);

      //load big image and hide peload animation when finished
      var img = new Image();
      img.onload = function () { $(preloader).hide(); preloader = null; } ;
      img.src = 'img/bigImage.jpg';
      $('#myDiv').append(img);

我不確定這是否正確：盡管小動畫可以在我的瀏覽器中使用，但始終會加載小動畫，即使大圖像已經加載並且位於緩存中也是如此。 有沒有一種方法可以停用此功能，或者可以考慮使用另一種方法來處理帶有小動畫的圖像預加載？

謝謝

Answer 1

這是我的處理方式：

var preloader = new Image(),
    img       = new Image(),
    div       = document.getElementById('myDiv');

img.onload = function () {
    preloader = null; 
    div.innerHTML = '';
    div.appendChild(this);
};

img.src = 'img/bigImage.jpg';

// if it's not in cache or not loaded (has no size), show the preloader
if (! (img.complete || img.width+img.height > 0) ) {
    preloader.src = 'img/preload.gif';
    div.innerHTML = '';
    div.appendChild(preloader);
}