Question

我是javascript的新手，我有一个关于加载和确认加载的问题允许游戏继续之前的所有资产，脚本等基本上，如何知道加载所有资产和脚本的时间......

这似乎是一个微不足道的问题/问题，但我问过几个问题程序员似乎没有一个确定的答案。

我有一个html页面加载资源 - 即pngs等所有指定的vis css - 没有任何内联指定。

我也有很多自定义的javascript类等，包括jquery，loading。

我目前正在使用它来确认页面加载 - 当页面加载功能运行时，内容变得可见。页面上有一个小的加载微调器被删除。

我正在使用jQuery标准加载脚本 - $(document).ready(function()

</head>
<body  onload="doAfterPageLoad()">

<div id="wrapper"  >

<div id="loadingIcon" >
    <div id="loadingWord"></div>
</div>
<div id="content"  style="visibility: hidden;">
    <!-- html stuff here -->
       </div>
</div>

</body>
</html>


//Javascript jQuery stuff....
<script type="text/javascript">
    function doAfterPageLoad()
    {
        $("#loadingIcon").css("visibility","hidden");
        $("#content").css("visibility","visible");
    }

    $(document).ready(function()
    {       
        // start javascript stuff
    });
 </script>

我的问题 - 这是同步吗？（我正在快速连接，无法分辨）是否有可能出现故障？ - 我应该设置一个变量并计算两个“加载”是否完成并用它来开始游戏？而且，如果我选择通过javascript加载器加载一些png资产文件，是否应该提供触发加载完成所需的第三个变量/值？

Answer 1

jQuery提供load()函数，因此而不是$(document).ready做

$(window).load(function()
{       
    // start javascript stuff
});

并且在加载所有资产时将触发

Answer 2

你有正确的想法。将所有DOM就绪依赖项放在：

中

$(document).ready(function()
{       
    // start javascript stuff
});

就像你说的那样，这允许html在允许执行javascript之前首先在页面上呈现。

Answer 3

我发现的最佳解决方案是使用requirejs。

http://requirejs.org

简而言之，它解决了这个问题，允许您根据需要加载脚本，并知道它们已加载。它使应用程序更快，因为您只需在需要时加载脚本。

基本语法是：

require(
    ["jquery","module"], // these are your dependancies
    function($,module){ // this is what you want to do after your deps have been loaded
        // do stuff
    });

在requirejs中，每个依赖模块都在其自己的文件中定义。您的模块包含在define（）函数中，以允许requirejs将其拉出来：

define(
        ["jquery"], // these are your dependancies
        function($){ // this is what you want to do after your deps have been loaded
            var module= {
                // my widget definition
            };
            return module;
        });

加载并确认加载所有资产，脚本html / jquery

3 个答案: