A lot of javascript\u00a0developers\u00a0have been using window.onload casually in their code but this is something which we should completely avoid since window.onload is only called once and if there are multiple window.onload events, then\u00a0only the last onload event gets called.<\/p>\n
In our Phaser games we normally initialize the game as following<\/p>\n
var mygame;\r\nwindow.onload = function() {\r\n mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, \"mygame\");\r\n\r\n mygame.state.add(\"Boot\", Boot);\r\n mygame.state.add(\"Loading\", Loading);\r\n mygame.state.add(\"MyGame\", MyGame);\r\n mygame.state.start(\"Boot\");\r\n};<\/pre>\nwindow.onload is called after\u00a0the main HTML, all CSS files, images and other resources have been loaded and rendered. We don’t want to stall loading of the game and its resources until everything else on the page has been loaded and rendered so\u00a0as soon as\u00a0initial HTML document has been loaded and parsed, we can start loading our game without waiting for page stylesheets, images,\u00a0etc to finish loading. An alternate approach for this using vanilla javascript would be<\/p>\n
var mygame\r\nvar loadGame = function () {\r\n mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, \"mygame\");\r\n\r\n mygame.state.add(\"Boot\", Boot);\r\n mygame.state.add(\"Loading\", Loading);\r\n mygame.state.add(\"MyGame\", MyGame);\r\n mygame.state.start(\"Boot\");\r\n};\r\n\r\nif (document.readyState === \"complete\" || (document.readyState !== \"loading\" && !document.documentElement.doScroll)) {\r\n loadGame();\r\n} else {\r\n document.addEventListener(\"DOMContentLoaded\", loadGame);\r\n}<\/pre>\nThis starts loading the game as soon as HTML DOM is parsed and ready and no fear of having to change the code in future if we decided to use some other code or external librray which is depenedent on window.onload.<\/p>\n
Read more about DOMContentLoaded<\/a> and document.readyState<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"A lot of javascript\u00a0developers\u00a0have been using window.onload casually in their code but this is something which we should completely avoid since window.onload is only called once and if there are multiple window.onload events, then\u00a0only the last onload event gets called. In our Phaser games we normally initialize the game as following var mygame; window.onload = function() { mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, “mygame”); mygame.state.add(“Boot”, Boot); mygame.state.add(“Loading”, Loading); mygame.state.add(“MyGame”, MyGame); mygame.state.start(“Boot”); }; window.onload is called after\u00a0the main HTML, all CSS files, images and other resources have been loaded and rendered. We don’t want to stall loading of the game and its resources until everything else on the page has been loaded and rendered so\u00a0as soon as\u00a0initial HTML document has been loaded and parsed, we can start loading our game without waiting for page stylesheets, images,\u00a0etc to finish loading. An alternate approach for this using vanilla javascript would be var mygame[…]<\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,3,24,4],"tags":[],"class_list":["post-1049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-html5","category-javascript","category-phaser"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=1049"}],"version-history":[{"count":1,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions"}],"predecessor-version":[{"id":1546,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1049\/revisions\/1546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=1049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=1049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}