带有精灵动画的预加载器

Question

我对 JS 还很陌生。参加了一些 lynda 课程，但我无法全神贯注地创建一个 sprite 预加载器（动画）。谷歌了很多，通过stackoverflow搜索，接近我想要的，但没有得到它。至此，我创建了这个徽标（已经将其设置为精灵），因此我希望精灵根据加载文件的百分比进行动画处理。

例如。在 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?)

这是我的第一篇文章，感谢您的时间和耐心。也欢迎任何外部参考，不要指望你为我写。再次感谢您很多！

编辑精灵本身。 http://roprojects.net/preloader/sprite.PNG

edit #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 就会淡出并进入主页面。但仍然对精灵是如何获取的一无所知填充。 （我假设它只是两个图像，另一个从左到右完成。）仍然必须弄清楚如何将 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

如果您查看 Performance API window.performance，您会发现为加载图形提供动力所需的所有数据。

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

再想一想，如果您刚开始使用 JS，那么从性能 API 开始可能有点过头了。

为您提供有关您可以使用的更简单工具的概述：

• requestAnimationFrame(yourFunction) 这个函数将获取你的函数并在有意义的情况下有效地执行它（用户正在查看你的选项卡，计算机可以实际渲染它等）如果你将它放在函数内的任何位置并让它调用 本身这样，您就有了一个高效的动画循环，让您可以流畅地为您的图像制作动画。

• 事件监听器。您已经使用了一个，您当前的代码在文档加载时执行。但是您当然也可以在加载的每个资源上添加加载事件，并让它更新动画中的某些内容。

  有大量的事件监听器，让你几乎可以收听 一切并进行适当的更新，因此您不必检查所有 如果有事情发生的时间。如果您只更新一个计数器 每次加载资源时除以 1，然后除以总量 资源的百分比。

• Canvas：我很喜欢你的精灵，我毫不怀疑它可以用 css 动画，但是如果你想对特殊效果有很多控制，或者甚至生成自己的图像并为它们制作动画或做一些事情精灵，比如改变颜色、变换、混合、在它们上绘图，画布将是你可能想要成为朋友的东西。

如果你想要灵感http://jsfiddle.net/bbVTB/2/

除非您的加载时间预计会超过几秒钟，否则我什至不会费心让它以某种方式可视化实际加载进度，而是分散用户的注意力并让他感觉短期和长期进度，这就是为什么有这种愚蠢的旋转，同时缓慢地“编织”某些东西，用户会好奇它变得足够长以完成加载。

我认为实际显示加载时间甚至可能是一个错误，除非花费了这么长时间，人们会失去耐心并离开。这就像盯着时钟，等待时间过去。为什么不让用户盯着至少有一点乐趣的东西呢？但这并不是真正的编程相关，而是设计决定。