test for a missing resource in Sencha Touch

Question

Here's a hopefully quick one for those with more Sencha Touch / Ext / JS experience than I have. How would I programmatically test for the existence of a remote resource, say an image? In other words how do I forestall an HTTP 404 before it happens and perform some default action, say swapping in a default image?

Here is what I'm currently doing (the catch(e) block is never hit):

albumArtArea.setTpl('<img class="cover_art" src="{iconUrl}"/>');
try {
    albumArtArea.setData(itemData);
}
catch (e) {
    // this block is never executed
    // 404 for missing album art; use the generic image
    itemData.iconUrl = "resources/images/img_music_generic.png";
    albumArtArea.setData(itemData);
}

score 0 · Answer 1 · answered Mar 27 '12 at 21:03

0

Instead of waiting for a 404 and then re-requesting the default image, can you let the server return the default image? You'd save a request and also simplify your client

answered Mar 27 '12 at 21:03

SuperJumbo

519
3
13

There are no "smarts" in the server for this particular application-- at the moment I have a development Apache but in the end the app needs to run entirely off the filesystem in the browser. – Steely1 Mar 27 '12 at 22:55

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

you can do something like this to show default image when an error occurs in loading gimage

function ImgError(source){
    source.src = "resources/images/img_music_generic.png";
    source.onerror = "";
    return true;
}

<img src="someimage.png" onerror="ImgError(this);" />

or if you are usihg jquery then

$('img').one('error', function() { 
       this.src = 'resources/images/img_music_generic.png';
});

Reference:

jQuery/JavaScript to replace broken images

edited May 23 '17 at 12:20

Community

1
1

answered Mar 27 '12 at 21:05

Saket Patel

6,573
1
27
36

I'll try something along these lines ASAP and let you know how it goes. Thanks. – Steely1 Mar 27 '12 at 22:56
Yes, that did the trick (the plain JS version with onerror in the img tag). – Steely1 Mar 28 '12 at 15:14

test for a missing resource in Sencha Touch

2 Answers2