Why show photos on local hard disk in metro app is so slow?

Question

I use code below to show photos on local hard disk, but it's extremely slow! I can see each photo display a little by a little. Anything wrong with my code or anything wrong with WinRT?

        Windows.Storage.KnownFolders.picturesLibrary.getFilesAsync(Windows.Storage.Search.CommonFileQuery.orderByDate).done(function (files) {
            filecount = files.length;
           for (var i = 0; i < filecount; i++) {
                var _segment = $(
                        '<div class="AlbumThumb">' +
                        '<img>' +
                        '<div class="PhotoCount">23</div>' +
                        '</div>' +
                        '<div class="AlbumName"></div>');
                _segment.find('.AlbumName').text(files[i].displayName);
                var _img = _segment.find('img');
                _img.on('load', function () {
                    $(this).css('width', _width);
                    $(this).css('height', _height);
                });
                _img.attr('src', URL.createObjectURL(files[i]));
                $('#AlbumContainer').append(_segment);
            }
        });
    };

Answer 1

do the pictures display slow when viewing them with something else like MSPaint?

Also Have you tried any of the samples that can display images?

---

Jeff Sanders (MSFT)

Answer 2

Hi,

me too has the same issue. My sample is a 4300x3600 JPEG file, and display in similar way as previous post. I tried to use "Simple Imaging" sample to display the photo, the same, it displays almost "band by band". In that simple image sample, if I choose the Canvas scenario, the initial loading time is pretty long, then the after effect (artistic strokes) run pretty fast.

I also tested the App in current store, like "Ashampoo FX", still, the loading time is long, and the App is closed without any message.

To open this image in desktop mode is different experience, MSPaint opens it in 1-second (almost immediately.) Also, in desktop mode, drag this image to IE browser, almost immediately.

Any difference between desktop IE and Metro HTML/JS engine?

If I use D2D sample to load and display the image, that is almost no waiting time.

(my test sample is from camera website, in case that matters, http://imaging.nikon.com/lineup/dslr/d7000/sample.htm)

Thanks.

Alex

Answer 3

You can take advantage of the DataSource Adapter, which binds a collection of storage items to the listview for you. Check out the sample here. If that doesn't help, try getting the thumbnail from the file first and displaying that in the <img> element. The way you do that would be item.getThumbnailAsync().then(function(thumb) {   // use thumb });

Justin Cooperman