Jump to content

Reload image when load failed


Recommended Posts



I'm making a website for a Android/iPhone game, the website  visualization is similar to a videogame, and has really big images, that's the reason I'm using Phaser and take profit of WebGL.


The target devices are PC, laptops, tablets and smartphones. For the PC and laptop version I'm loading really big images. Now I want to divide the assets in 4 different sizes ( XHD, HD, MD and SD), the size it loads depends on the device it's loading the website or bandwidth. When it doesn't find the texture in the target fodler, it should look for it in the folder below it.


So if it tries to load texture "test.png" in the folder "HD" and fails to load it, it should look for it in folder "MD".


Here's the code I'm using to reload the image when load failed.

function loadStageAssets( stage ){        base = scene.stages[stage].resources;    for(var i = 0; i < base.images.length; i++){        var curImg = base.images[i];        var dir = "/textures/" + textureQualityArray[textureQuality] + "/" + curImg[1];        game.load.image(curImg[0], dir);    }}function onLoadError( a , b ){    var url = b.url;    var urlArray = url.split("/");    var file = urlArray.pop();    var folder = urlArray.pop();    var key = b.key;    var newQualityFolder;    if( folder == textureQualityArray[ TEXTURE_QUALITY_XHD ] ){        newQualityFolder = textureQualityArray[ TEXTURE_QUALITY_HD ];   } else if( folder == textureQualityArray[ TEXTURE_QUALITY_HD ] ) {        newQualityFolder = textureQualityArray[ TEXTURE_QUALITY_MD ];    } else if( folder == textureQualityArray[ TEXTURE_QUALITY_MD ] ) {        newQualityFolder = textureQualityArray[ TEXTURE_QUALITY_SD ];    }        var dir = "/textures/" + newQualityFolder + "/" + file;    game.load.image( key , dir );}

Problem is the game.load.image inside onFileError doesn't seem to try to load anything.


Anyone knows what is happening?



Link to comment
Share on other sites

The Loader doesn't work like this I'm afraid. It doesn't load the image the moment you call "load.image", it adds it to a file queue and that is then started when you tell it to start. Or if used in a preload function it collects all of the calls together, creates a queue from them and then starts it automatically for you. But you're using it outside of preload so you need to start it yourself. And crucially: once the load has started, you cannot then modify the queue.

Link to comment
Share on other sites

Our solution to this was to modify the queue file names based on the platform capabilities and other variables. Thus we know what to add before adding it to the queue without needing to resort to failed attempts. To overly simplify (not to take account scaling requirements and fractional values) the code checks for the device pixel ratio to see if to suffix file name with @1x or @2x.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...