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

    Question

  • 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 03, 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 03, 2012 4:22 PM
  • How are you loading the images?  Is this a databind of some sort?

     


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 7:18 PM
    Moderator
  • Yes, its a databind. The property is a "blob:"generated from a (local) URL
    Friday, February 03, 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


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 7:46 PM
    Moderator
  • 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 03, 2012 8:31 PM
    Friday, February 03, 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


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 8:16 PM
    Moderator
  • 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 03, 2012 8:32 PM
    Friday, February 03, 2012 8:26 PM
  • I do not know what notifyMutated is.  Can you expand on that?


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 8:28 PM
    Moderator
  • 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 03, 2012 8:33 PM
  • In DP you simply call something like:

            lv.dataSource.refresh();

     

    Does that help?


    -Jeff


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 8:34 PM
    Moderator
  • I will try that, thanks!
    Friday, February 03, 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;
                    items.push({
    			... 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'));
            lv.dataSource.refresh();
    

    -Jeff

     

     


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 8:51 PM
    Moderator
  • 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 03, 2012 9:01 PM