Prevent "red-cross" image display for not yet loaded images


  • The app displays the "image not found red cross icon" in our listitem templates before it starts to load the existing image. Is there a way to prevent it from displaying this image?
    Friday, February 3, 2012 3:14 PM

All replies

  • http://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found

    This solution looks like something you could use. There are jquery and non-jquery solutions in there.

    Friday, February 3, 2012 4:22 PM
  • How are you loading the images?  Is this a databind of some sort?


    Jeff Sanders (MSFT)
    Friday, February 3, 2012 7:18 PM
  • Yes, its a databind. The property is a "blob:"generated from a (local) URL
    Friday, February 3, 2012 7:24 PM
  • A common technique is to set the src property to a temp image (like a whirling wating gif) and when the databind hits that image is replaced with the real one.


    Jeff Sanders (MSFT)
    Friday, February 3, 2012 7:46 PM
  • Thats a good idea yes. But how do I force the listview to refresh the item?

    Given that pseude (coffeescript) code:


    updateThumbnailAtIndexAsync: (index) ->
      docs = @documents
      document = docs.getAt index
      storage.StorageFile.getFileFromPathAsync(document.path).then (file) ->
    file.getThumbnailAsync(storage.FileProperties.ThumbnailMode.documentsView).then (thumbnail) ->
        document.thumbnail = URL.createObjectURL thumbnail
        docs.dataSource.change docs._keys[index], document

    the listview does not react to notifyMutated.


    • Edited by phil_ke Friday, February 3, 2012 8:31 PM
    Friday, February 3, 2012 8:11 PM
  • Hi Phil,

    Sorry... I am not going to be able to help you with CoffeeScript, as I do not know how that translates to Javascript.


    Jeff Sanders (MSFT)
    Friday, February 3, 2012 8:16 PM
  • It translates to this:



    updateThumbnailAtIndexAsync: function(index) {
      var docs = @documents
      var document = docs.getAt(index);
      storage.StorageFile.getFileFromPathAsync(document.path).then(function(file) {
        file.getThumbnailAsync(storage.FileProperties.ThumbnailMode.documentsView).then(function(thumbnail) {
          document.thumbnail = URL.createObjectURL thumbnail
          # This is a hack that causes the view to be updated.
          docs.dataSource.change docs._keys[index], document


    • Edited by phil_ke Friday, February 3, 2012 8:32 PM
    Friday, February 3, 2012 8:26 PM
  • I do not know what notifyMutated is.  Can you expand on that?

    Jeff Sanders (MSFT)
    Friday, February 3, 2012 8:28 PM
  • uupss.. I guess that was part of new API... I removed it here.

    The question is: in the developer preview how would you notify the bound listeners of a datasource about changes in the dataset?

    Friday, February 3, 2012 8:33 PM
  • In DP you simply call something like:



    Does that help?


    Jeff Sanders (MSFT)
    Friday, February 3, 2012 8:34 PM
  • I will try that, thanks!
    Friday, February 3, 2012 8:42 PM
  • Let me sketch out real quick how I would do this is some real rough psuedo code:

    1.  Among other things in your template databind the image src:

    <img data-win-bind="src: url" />

    2.  Create and populate a dummy datasource of items and set src to the temp image:

    items is a global variable used for your datasource on the listview

                for (var j = 0; j < numItems; j++) {
                    var key = i + '.' + j;
    			... other data here.....
    	            description: '',
                        url: '../images/loading-thumb.gif',

    3. bind the datasource to the list view.

    4.  load the real items with actual data...

            for (var i = 0; i < results.results.length; i++) {
                items[i].url = results.results[i].url;
                items[i].description = results.results[i].description;
        ... and the rest of your results...
            var lv = Win.UI.getControl(document.getElementById('myListView'));




    Jeff Sanders (MSFT)
    Friday, February 3, 2012 8:51 PM
  • Thanks for your effort Jeff!

    Unfortunately thats not how I can use it. The update happens inside a Promise and that promise only knows the model (items), not the view (listview).

    The listview is bound to the items and should update when an item changed, that is currently displayed by the listview. So I need to notify all listeners from the items model somehow.

    Friday, February 3, 2012 9:01 PM