简单的预加载器，加载所有的资源，并在显示网站和运行动画之前缓存它们

Simple preloader that loads all resources and caches them before showing site and running animations

本文关键字：加载 动画 运行 缓存 网站 资源 简单 显示      更新时间：2023-09-26

我正在尝试创建一个简单的预加载器，将请求和预加载所有资源，直到一切都缓存。然后网站应该逐渐消失。我遇到的问题是，我不确定我下面的代码是否ok，因为我还是一个新手。此外，我无法做到的是在预加载器完成之前停止任何css3动画的发射。例如，当网站加载时，我有很多淡入和滑动效果。当预加载器运行时，它也以某种方式在后台触发我的动画…因此，当我的网站加载没有动画显示。

所以我需要能够

1)在网站显示之前预加载所有资源并缓存它们(同时它显示一个小gif)

2)加载时应该防止动画触发。当它完成后，网站显示，然后开始触发所有css3动画。顺便说一下，动画只触发一次，这就是我关心的原因。

这里有一个JsFiddle。我希望这是好的，因为我仍然是这个网站的新手，不经常使用它，除了notepad++或dreamweaver:

http://jsfiddle.net/5w2JU/

<script type="text/javascript">
    //<![CDATA[
        $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(350).css({'overflow':'visible'});
        })
    //]]>
</script>

加载完成后使用jquery .addclass()。

相关文章：