Zeto Posted March 26, 2019 Share Posted March 26, 2019 Hi everyone! I have been doing a lot of work with PIXI.js, and it is an absolute wonderful engine. However, I have had trouble with loading extra APIs such as pixi-display and pixi-multistyle-text synchronously in the head tag. I have managed to fixed the issue by loading the extensions once the document was fully loaded effectively inserting an extra asynchronous step, and then running the whole program. I was wondering if anyone had a better solution? Right now it is like this: load pixi.js and all document -> load pixi-display and all other apis -> run javascript And preferably, i was wondering if it would be possible to load pixi.js and pixi-display all together -> run javascript once document loaded Quote Link to comment Share on other sites More sharing options...
jonforum Posted March 26, 2019 Share Posted March 26, 2019 You have many way to perform thats You will maybe get better response from other , but you can example do it with a document onload. load_Js(){ const javascript = [ //all pixi extention "js/core/pixi-display.js", ]; const css = [ // all css if need ]; const onComplette = () => $app.start(); const head = document.getElementsByTagName('head')[0]; let total = javascript.length + css.length; for (let i = 0, l = css.length; i < l; i++) { let link = document.createElement('link'); link.onload = function() { total--; !total && onComplette(); }; // link.async = false; //tmp = link.cloneNode(true); link.href = css[i]; link.rel = 'stylesheet'; head.appendChild(link); } for (let i = 0, l = javascript.length; i < l; i++) { let script = document.createElement('script'); script.onload = function() { total--; !total && onComplette(); }; script.async = false; script._url = javascript[i]; script.src = javascript[i]; script.href = javascript[i]; document.body.appendChild(script); } } or if you use a app you can also use html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="viewport" content="user-scalable=no"> <link rel="icon" href="icon/icon.png" type="image/png"> <link rel="apple-touch-icon" href="icon/icon.png"> <link rel="stylesheet" type="text/css" href="fonts/gamefont.css"> <title>ANFT</title> <!--CORE UTILITY Graphics.isFontLoaded("ArchitectsDaughter")--> </head> <body style="background-color: black; overflow: hidden; margin: 0px;"> <!--CORE UTILITY--> <script type="text/javascript" src="js/utility/ECC.js"></script> <script type="text/javascript" src="js/utility/pixiMapEditor.js"></script> <!--PIXI && Other--> <script type="text/javascript" src="js/core/polyfill.js"></script> <script type="text/javascript" src="js/libs/papaparse.js"></script> <script type="text/javascript" src="js/libs/pixi.js"></script> <script type="text/javascript" src="js/libs/pixi-tilemap.js"></script> <script type="text/javascript" src="js/libs/pixi-picture.js"></script> <script type="text/javascript" src="js/libs/pixi-filters.js"></script> <script type="text/javascript" src="js/libs/pixi-layers.js"></script> <script type="text/javascript" src="js/libs/pixi-lights.js"></script> <script type="text/javascript" src="js/libs/pixi-spine.js"></script> <script type="text/javascript" src="js/libs/pixi-projection-spine.js"></script> <script type="text/javascript" src="js/libs/pixi-heaven.js"></script> <script type="text/javascript" src="js/libs/TweenMax.js"></script> <script type="text/javascript" src="js/libs/TimelineLite.js"></script> <script type="text/javascript" src="js/libs/EasePack.js"></script> <script type="text/javascript" src="js/libs/pixi-zero.js"></script> .............. Wait from other people to get more tricks .... Quote Link to comment Share on other sites More sharing options...
Zeto Posted March 27, 2019 Author Share Posted March 27, 2019 @jonforum Thank you for the reply! I have been using document.onload as well (and a similar function to yours too), but it makes the code very dense (and the page slightly slower) and have too many callbacks (have to track each api and when everything is done, then start the script). I think the solution I am looking at is have pixi.js and the apis in <head>, then modify the pixi-display.min.js file to delay the loading, and in document.onload have a function that loads it all. I thought this wasn't a developer friendly way at all, and pixi.js has been very developer friendly so I thought i was doing it the hard way! Maybe someone has a better trick! Quote Link to comment Share on other sites More sharing options...
jonforum Posted March 27, 2019 Share Posted March 27, 2019 you can also use node `npm` in terminal for install all `dependencies` and module for your web app. and it managed from `package.json`. You can find video tutorial about how setup this ways. This way will manage all automatically, but i dont like it, am a old dinosaur.... Quote Link to comment Share on other sites More sharing options...
Zeto Posted March 27, 2019 Author Share Posted March 27, 2019 @jonforum Here is what i don't understand: but at the end of the day, on the client side, we have to load pixi.js from the html and even having installed pixi.js and pixi-display from npm, they will also be needed to be loaded from html <script> which ends up with the same problem Quote Link to comment Share on other sites More sharing options...
jonforum Posted March 27, 2019 Share Posted March 27, 2019 hum .. I am not an expert but the tests on my side worked. you need play with import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import And also setup your server side for debug , ex: me i use nwjs with vscode for distribution and debugging { "version": "0.1.0", "configurations": [ { "type": "nwjs", "request": "launch", "name": "nwjs Node debug", "runtimeExecutable": "${workspaceRoot}\\nwjs-sdk\\nw.exe", "runtimeArgs": [ "${workspaceRoot}", "--remote-debugging-port=9222" ], "webRoot": "${workspaceRoot}", "port": 9222, "reloadAfterAttached": true, "sourceMaps": false, "nwjsVersion": "any", }, { "type": "nwjs", "request": "attach", "name": "Attach to NWjs", "port": 9222, "webRoot": "${workspaceFolder}", "reloadAfterAttached": true, }, ] } you also need a jsconfig.json { "compilerOptions": { "target": "ES6" }, "exclude": [ "node_modules","bower_components","temp","tmp","jspm_packages", "./js/__old/","./js/libs/" ] } But am not a pro ... and i dont know if you can get more deep help from here , maybe more luck on https://stackoverflow.com/ Quote Link to comment Share on other sites More sharing options...
Zeto Posted March 28, 2019 Author Share Posted March 28, 2019 good news I have found the perfect solution!!!!!!!!! I didn't know about this feature in HTML5 but there is a thing called "defer" and "async". Apparently all script tags with async will be run whenever they are loaded whilst the script having defer tag will be run in order AFTER all document is parsed and BEFORE document.onload. Hence the solution is: <head> <!--Code that doesn't care about order--> <script src="/lib/skills.js" async></script> <!--Code that cares about order--> <script src="/pixi/pixi.min.js" defer></script> <script src="/pixi/pixi-layers.js" defer></script> </head> @jonforum thank you for giving me a hint with the import and finding this absolute gem!!!!! To hell with the extra document onload loader jonforum 1 Quote Link to comment Share on other sites More sharing options...
jonforum Posted March 28, 2019 Share Posted March 28, 2019 ho i just learn it too thanks to share ! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.