帶有精靈動畫的預加載器

Question

我對JS很新。花了一些琳達的課程，但我無法圍繞創建精靈preloader（動畫）。谷歌搜索了很多，通過stackoverflow搜索，接近我想要的，但沒有着陸。至此，我創建了這個標識（已經將它設置爲精靈），所以我希望精靈根據加載文件的百分比進行動畫製作。

Ex。在0％-15％之間我會有第一個，第二個在15％到30％之間，直到最後一點，我將把div設置爲visiblity：隱藏，如下所示：

HTML

<div id="preloader"> 

CSS

#preloader { 
margin: 0-auto; 
width: 450px; 
height: 400px; 
background-color: #282727; 
background-image: url(http://roprojects.net/preloader/sprite.PNG) 
} 

JS不知道，對不起，如果下面寫的好像啞巴。

// var percent = Something that would get the numeric progress of the page load; 
$(window).load(function() { 
// example of first animation. And I don't even know how I should be going on from here. 
// Maybe a for statement, some sort of a loop, was even thinking conditionals. 
// Maybe a case/switch 
// if (percent > 15 && percent <= 30) {below } 
    $('#preloader').css('backgroundPosition', '0 -400px'); 
}); 
// But ultimately that would require it to ..update itself (loop, I guess?) 

這是我的第一篇文章，感謝您的時間和耐心。任何外部參考也歡迎，不要指望你爲我寫。再一次，謝謝lot！

編輯精靈本身。 http://roprojects.net/preloader/sprite.PNG

編輯＃2我已經意識到我還應該給預加載的歸宿例子，所以這裏是：http://www.fk-agency.com/。所以，我意識到通過js的看着

if(navigator.appName == "Microsoft Internet Explorer") 
{ 
    var pos = navigator.appVersion.indexOf("MSIE"); 
    var ver = navigator.appVersion.substr(pos,8); 
    if((ver == "MSIE 6.0") || (ver == "MSIE 7.0")) { var oldie = true} 
}  
    if(oldie != true){ 
    $(window).load(function() { 
     setTimeout(function(){ 
     $("#loading").fadeOut(function() { 
      $("#container").fadeIn(1500) 
     }) 
     },300); 
    }) 
    } 

那麼我現在從這個得到的是我們做的一個browsercheck，如果一切都工作了不錯，一旦頁面加載，預加載的div淡出和主頁進來，但仍然無知，如何精靈得到填補。 （我假設它只是兩個圖像，另一個從左到右完成）。還必須弄清楚如何將css屬性更改綁定到數字頁面加載過程本身。 ...任務繼續。

Answer 1

用您的百分比代碼替換i++。
JS：

var i = 1; 
setInterval(function() { 
    if (i < 318) { 
     i++; 
    } else { 
     document.getElementById("transparentImg").style.display = "none"; 
     document.getElementById("percentage").style.display = "none"; 
     document.getElementById("background").style.display = "none"; 
    } 
    document.getElementById("percentage").style.width = i + "px"; 
}, 100); 

HTML：

<div id="background"><div/> 
<div id="percentage"><div/> 
<img id="transparentImg" src="http://vividvid.tk/images/imageedit_4_9586029984.gif"/> 

CSS：

body{ 
    background-color: black; 
} 
#percentage{ 
background-color: rgb(255,255,255); 
    width:320px; 
    height:80px; 
    margin-left:-150px; 
    left:47%; 
    margin-top:-40px; 
    top:50%; 
    position:absolute; 
    z-index:1; 
} 
#background{ 
    background-color: rgb(100,100,100); 
    width:320px; 
    height:80px; 
    margin-left:-150px; 
    left:50%; 
    margin-top:-40px; 
    top:50%; 
    position:absolute 
} 
#transparentImg{ 
    width:320px; 
    position:relative; 
    top:0px; 
} 

Answer 2

如果您檢查性能API window.performance，您會發現爲加載圖形所需的所有數據。

https://developer.mozilla.org/en-US/docs/Navigation_timing

在第二個想法，如果你只是開始了與JS的表現API開始可能是矯枉過正。

給你一個概述關於在您的處置簡單的工具：

• requestAnimationFrame(yourFunction)此功能將您的功能，並有效地執行它，如果它是有道理的（用戶正在查看您的標籤，電腦也能實際上渲染它等）如果你把它放在一個函數的任何地方，讓它通過這種方式調用本身，你有一個高效的動畫循環，讓你順利地動畫你的圖像。

• 事件監聽器。您已經使用了一個，您的當前代碼在文檔加載時執行。但是，您當然也可以在加載的每個資源上添加加載事件，並讓它更新動畫中的某些內容。

  有噸事件監聽器，讓你聽幾乎 一切，做適當的更新，因此您不必檢查所有 的時間，如果事情發生。如果您每次加載資源時只將1個計數器 更新爲1，並將其除以總資源量 即可獲得您的百分比。我喜歡你的精靈，我毫不懷疑它可以用css進行動畫製作，但是如果你想對特效有很多控制，甚至可以生成自己的圖像併爲它們製作動畫或做精靈的東西，比如改變顏色，變換，混合，繪製它們，畫布會成爲你想要交友的東西。

剛把樂趣使得我如何做一個加載動畫（帆布爲主）一個小小的提琴，如果你想靈感http://jsfiddle.net/bbVTB/2/

除非你的加載時間預計將超過一堆幾秒鐘，我甚至不會費心使它看起來實際的加載進度，而是分散用戶並給他一個短期和長期進展的感覺，這就是爲什麼有這個愚蠢的旋轉，同時緩慢的「編織」一些東西，用戶會對加載完成的時間長短感到好奇。

我認爲實際顯示加載時間甚至可能是一個錯誤，除非它需要很長時間纔會失去耐心並離開。這就像盯着一個時鐘，等待時間過去。爲什麼不讓用戶盯着至少有趣的東西？但這不是真的與編程有關，而是設計決定。