實現loading bar 並解決因cache而導致的bugs

因為jQuery的關係,現在要制作javascript版的preloading變得非常簡單,以下是相關的方式:

var loaded=0; //how many image are loaded.
var totalImg=$(".stage img").length; //how many image we will preload
var process=0;
$(".stage img").each(function()
{
$(this).load(function(e)
{
loaded++;
process=Math.round((loaded/totalImg)*100); //get process status
if(loaded>=totalImg)
{
//load complete, do something
}
});
});

這樣就完成了image preload,並且計算到loading狀態。
可是這個方式,如果image被cache,那麼就無法正常操作,這時候我們需要detect image是否已經loaded.所以需要加上:

if($(".stage img")[0].complete==false)
{
//go run loading script.
}else{
//load complete, play stage
}