在所有资源加载AND canvas完全呈现后如何调用JQuery

Question

我正在制作一款拥有许多图形和资源的游戏。

因此，我创建了一个简单的加载页面，以便在加载时显示用户。我使用下面的JQuery使加载屏幕在所有内容加载时淡出：

$(document).ready(function(){
    $("#loading").fadeOut("slow")
})

据我所知，这应该只是在文档完全加载后与所有资产一起淡出加载屏幕，但事实并非如此！观察页面本身的演示：tdat.tk

正如您所看到的，加载屏幕淡出，但画布仍为空白并呈现。我怎样才能防止这种情况发生？

Answer 1

尝试加载（）功能

$(document).load(function(){
    $("#loading").fadeOut("slow");
})

加载功能仅在加载所有文档资源时运行。 准备好的函数将在加载文档的html时运行。

Answer 2

在document.ready中，开始加载动画并在幕后加载资源。为您的资产创建一个数组并开始逐个加载它们。例如

var image = new Image();
image.onload = function() {
  //when image loaded
};

image.src = url;

加载完所有资源后，淡出加载屏幕。您也可以参考此示例http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/