javascript - 带有 Sprite 动画的预加载器

Question

我是 JS 的新手。参加了一些 lynda 类(class)，但我无法全神贯注于创建 Sprite 预加载器(动画)。谷歌搜索了很多，通过 stackoverflow 搜索，接近我想要的，但没有找到它。到目前为止，我已经创建了这个 Logo (已经将其设置为 Sprite )，所以我希望 Sprite 根据加载文件的百分比进行动画处理。

例。在 0%-15% 上，我将拥有第一个，第二个在 15% 到 30% 之间，依此类推，直到最后一个点，我将 div 设置为可见性:隐藏，如下所示:

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?)

这是我的第一篇文章，感谢您的时间和耐心。也欢迎任何外部引用，不希望您为我编写。再次感谢您很多!

编辑 Sprite 本身。 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);
    })
    }

所以我从中得到的是我们做了一个浏览器检查，如果一切正常，一旦页面加载，预加载器 div 淡出，主页出现。但是，仍然不知道 Sprite 是如何得到的填充。 (我假设它只是两张图片，另一张从左到右完成。)仍然需要弄清楚如何将 css 属性更改绑定(bind)到数字页面加载过程本身。 ...任务仍在继续。

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;
}