Crash on load screen when server is down

Whenever my server is down that host my images, I get an error about assets before it crashes. The only image that is being pulled in at the start is the home page background image through CSS. When I try to replicate the error while the server is up by putting a wrong address or file name, the app loads with a blank background as it should when the server is down. Any ideas? I consider using a “new Image()” approach but would really appreciate any insight if others have run into this problem before. Thank you very much for your time.

What do you need beyond a catch statement?

I am saying that if I put this in my CSS

background: url(http://mysite.com/image.jpg) no-repeat fixed center;

whenever my server goes down, my app will not open and gives me an assets error before crashing.

but if I give it a wrong address or image url it still opens.

This is what I was thinking of doing if it would work. But there is no way to test it until the server goes down again.

ionViewWillEnter(){
var image = new Image();
image.src = ‘http://test.com/public/bg.png’;
image.onload = this.imageLoaded;
image.onerror = this.imageNotLoaded;
}

imageLoaded() {
let elm = document.querySelector(".homeContent");
elm.style.background = “url(‘http://test.com/public/bg.png’) no-repeat fixed center”;
}

My approach to images is to initialize them all to some placeholder value that gets overwritten once the more hi res version is available. That way the user has a decent experience whether or not there’s an internet connection. I suggest you choose a background that is simple to store in memory, set the background to that on startup, and then if/when the better background is available, overwrite. That way the user is guaranteed a background, and you can error-trap the server call with try/catch.

2 Likes