通过冻结浏览器同步加载图像
Synchronously loading an image by freezing the browser
我在 node.js 中使用 Electron 框架来创建一个 HTML5 Canvas 游戏,我已将我所有的资源映射到 Atlases(一张包含精灵的图像)中。在游戏开始之前,我想将每个 atlas.png
加载到一个对象中,该对象继续将所有地图集映射在一起,以便更容易地使用 canvas 元素中的图像。
在 Electron 中执行此操作时,我 unable
冻结 Electron BrowserWindow
。这使得我的 application/game 只是继续代码,有时它会停止。
this.addAtlas = function (name, root)
{
// Creating the path for the Atlas
var path = root + '/Assets/Atlases/' + name + '/' + name;
// JSON File
var jpath = path + '.json';
// PNG File
var ppath = path + '.png';
// Checking if both png and json files exist
if (!fs.existsSync(jpath) || !fs.existsSync(ppath) ) throw new Error('Atlas | "' + name + '" is not a valid Atlas (Misssing .json or/and .png file)');
// Loading Atlas image syncrounously to Atlas.js
var img = new Image(),
isDone = false;
// Initiating the Atlas
img.onload = function () { isDone = true; };
img.onerror = function () { throw new Error('Atlas | Atlas image failed to load!'); };
img.src = ppath;
// Stopping the browser to continue executing ANY scripts untill the image has finished loading.
console.log('Started');
///////////////////////\
// ATTENTION // \
/////////////////////// \
// This is where my \ //
// game is crashing \ //
///////////////////////////
var count = 0;
while (!isDone) {
console.log(count);
count++;
}
console.log('Finished');
// Getting JSON file to an actual javascript object
var obj = JSON.parse( fs.readFileSync(jpath).toString() );
// Gathering all the information into an object
var robj = {};
robj.atlas = obj.Atlas;
robj.image = img;
robj.name = name;
robj.id = this.atlasas_successully_loaded + 1;
robj.path = path;
// Injecting this.loaded with new Atlas
this.loaded[robj.name] = robj;
// Increasing the ID count
this.atlases_successully_loaded++;
}
虽然此 while
循环是 运行,但控制台中绝对没有计数,如果我去检查 DOM Tree
,则没有 HTML,如果我去消息来源没有什么。那么我怎样才能冻结浏览器直到图像/图集完全加载?
我猜您在这里需要使用旧的 setInterval 技巧。而不是有一个无限循环阻止执行堆栈继续你做这样的事情:
var interval;
interval = setInterval(function () {
if (/*Some condition*/) {
clearInterval(interval);
nextFunction();
}
}, 50) //check every 50 ms
用 promises 做会好得多,但这需要更多的工作。
我认为这是一个可行的 promise 解决方案,虽然我没有深入研究你的代码,只是复制粘贴并假设它是正确的想法。
this.addAtlas = function (name, root) {
// Creating the path for the Atlas
var path = root + '/Assets/Atlases/' + name + '/' + name;
var that = this;
// JSON File
var jpath = path + '.json';
// PNG File
var ppath = path + '.png';
// Checking if both png and json files exist
if (!fs.existsSync(jpath) || !fs.existsSync(ppath) ) throw new Error('Atlas | "' + name + '" is not a valid Atlas (Misssing .json or/and .png file)');
// Loading Atlas image syncrounously to Atlas.js
var myPromise = function (resolve, reject) {
var img = new Image(),
isDone = false;
// Initiating the Atlas
img.onload = function () { resolve() };
img.onerror = function () { reject('Atlas | Atlas image failed to load!'); };
img.src = ppath;
};
// Stopping the browser to continue executing ANY scripts untill the image has finished loading.
console.log('Started');
///////////////////////\
// ATTENTION // \
/////////////////////// \
// This is where my \ //
// game is crashing \ //
///////////////////////////
var count = 0;
myPromise.then(function () {
console.log('Finished');
// Getting JSON file to an actual javascript object
var obj = JSON.parse( fs.readFileSync(jpath).toString() );
// Gathering all the information into an object
var robj = {};
robj.atlas = obj.Atlas;
robj.image = img;
robj.name = name;
robj.id = this.atlasas_successully_loaded + 1;
robj.path = path;
// Injecting this.loaded with new Atlas
that.loaded[robj.name] = robj;
// Increasing the ID count
that.atlases_successully_loaded++;
});
};
我在 node.js 中使用 Electron 框架来创建一个 HTML5 Canvas 游戏,我已将我所有的资源映射到 Atlases(一张包含精灵的图像)中。在游戏开始之前,我想将每个 atlas.png
加载到一个对象中,该对象继续将所有地图集映射在一起,以便更容易地使用 canvas 元素中的图像。
在 Electron 中执行此操作时,我 unable
冻结 Electron BrowserWindow
。这使得我的 application/game 只是继续代码,有时它会停止。
this.addAtlas = function (name, root)
{
// Creating the path for the Atlas
var path = root + '/Assets/Atlases/' + name + '/' + name;
// JSON File
var jpath = path + '.json';
// PNG File
var ppath = path + '.png';
// Checking if both png and json files exist
if (!fs.existsSync(jpath) || !fs.existsSync(ppath) ) throw new Error('Atlas | "' + name + '" is not a valid Atlas (Misssing .json or/and .png file)');
// Loading Atlas image syncrounously to Atlas.js
var img = new Image(),
isDone = false;
// Initiating the Atlas
img.onload = function () { isDone = true; };
img.onerror = function () { throw new Error('Atlas | Atlas image failed to load!'); };
img.src = ppath;
// Stopping the browser to continue executing ANY scripts untill the image has finished loading.
console.log('Started');
///////////////////////\
// ATTENTION // \
/////////////////////// \
// This is where my \ //
// game is crashing \ //
///////////////////////////
var count = 0;
while (!isDone) {
console.log(count);
count++;
}
console.log('Finished');
// Getting JSON file to an actual javascript object
var obj = JSON.parse( fs.readFileSync(jpath).toString() );
// Gathering all the information into an object
var robj = {};
robj.atlas = obj.Atlas;
robj.image = img;
robj.name = name;
robj.id = this.atlasas_successully_loaded + 1;
robj.path = path;
// Injecting this.loaded with new Atlas
this.loaded[robj.name] = robj;
// Increasing the ID count
this.atlases_successully_loaded++;
}
虽然此 while
循环是 运行,但控制台中绝对没有计数,如果我去检查 DOM Tree
,则没有 HTML,如果我去消息来源没有什么。那么我怎样才能冻结浏览器直到图像/图集完全加载?
我猜您在这里需要使用旧的 setInterval 技巧。而不是有一个无限循环阻止执行堆栈继续你做这样的事情:
var interval;
interval = setInterval(function () {
if (/*Some condition*/) {
clearInterval(interval);
nextFunction();
}
}, 50) //check every 50 ms
用 promises 做会好得多,但这需要更多的工作。
我认为这是一个可行的 promise 解决方案,虽然我没有深入研究你的代码,只是复制粘贴并假设它是正确的想法。
this.addAtlas = function (name, root) {
// Creating the path for the Atlas
var path = root + '/Assets/Atlases/' + name + '/' + name;
var that = this;
// JSON File
var jpath = path + '.json';
// PNG File
var ppath = path + '.png';
// Checking if both png and json files exist
if (!fs.existsSync(jpath) || !fs.existsSync(ppath) ) throw new Error('Atlas | "' + name + '" is not a valid Atlas (Misssing .json or/and .png file)');
// Loading Atlas image syncrounously to Atlas.js
var myPromise = function (resolve, reject) {
var img = new Image(),
isDone = false;
// Initiating the Atlas
img.onload = function () { resolve() };
img.onerror = function () { reject('Atlas | Atlas image failed to load!'); };
img.src = ppath;
};
// Stopping the browser to continue executing ANY scripts untill the image has finished loading.
console.log('Started');
///////////////////////\
// ATTENTION // \
/////////////////////// \
// This is where my \ //
// game is crashing \ //
///////////////////////////
var count = 0;
myPromise.then(function () {
console.log('Finished');
// Getting JSON file to an actual javascript object
var obj = JSON.parse( fs.readFileSync(jpath).toString() );
// Gathering all the information into an object
var robj = {};
robj.atlas = obj.Atlas;
robj.image = img;
robj.name = name;
robj.id = this.atlasas_successully_loaded + 1;
robj.path = path;
// Injecting this.loaded with new Atlas
that.loaded[robj.name] = robj;
// Increasing the ID count
that.atlases_successully_loaded++;
});
};