這是一個正確的方式來預加載圖像在Javascript/jquery（動畫）？

Question

Im'試圖在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); 
}