[Interest] Improve ListView scrolling performance (many pictures)

Andy asmaloney at gmail.com
Fri Aug 11 15:54:14 CEST 2017


I've been using jpeg - something like this (where MAX_THUMB_DIM is 60):

void  _saveThumbnail( QImage inImage, const QString &inPath )
{
   QImage   image = inImage.scaled( MAX_THUMB_DIM, MAX_THUMB_DIM,
Qt::KeepAspectRatio, Qt::SmoothTransformation );

   QImageWriter writer( inPath, "JPEG" );

   writer.setQuality( 100 );
   writer.setOptimizedWrite( true );
   writer.setProgressiveScanWrite( true );

   writer.write( image );
}

It gives me decent-looking, reasonable sized thumbnails.

---
Andy Maloney  //  https://asmaloney.com
twitter ~ @asmaloney <https://twitter.com/asmaloney>


On Fri, Aug 11, 2017 at 9:36 AM, Bernhard B <schluchti at gmail.com> wrote:

> Hi Andy,
>
> many thanks for your response! I am also using a
> QAbstractListModel-derived class that gets exposed to the QML world which
> contains the images.
>
> Yesterday I started to resize the images before feeding them to the
> ListModel. According to the QML Profiler the delegate gets now created a
> little bit faster, but fast scrolling is still a little bit sluggish. Today
> I probably will play a little bit with different image codecs to see if
> those have an impact. Currently I am using *.png files often which is
> probably not the best choice.
>
> Thanks a lot for your input, really appreciated!
>
> Bernhard
>
>
> Am Freitag, 11. August 2017 schrieb Andy :
>
>> Bernhard:
>>
>> I don't use QML, but in my application I use a QAbstractItemModel-derived
>> class and a QTreeView-derived class to display image thumbnails in the
>> view. The way I make it speedy is to save the image as a thumbnail so the
>> view items don't need to resize the image data at all.
>>
>> Maybe you could save a thumbnail of an appropriate size when you're
>> adding them to your model?
>>
>> ---
>> Andy Maloney  //  https://asmaloney.com
>> twitter ~ @asmaloney <https://twitter.com/asmaloney>
>>
>>
>> On Fri, Aug 11, 2017 at 3:33 AM, Bernhard B <schluchti at gmail.com> wrote:
>>
>>> Hi Vlad,
>>>
>>> you mean the QQuickAsyncImageProvider? That one sounds really promising.
>>> Will definitely try that out. Many thanks for the suggestion!
>>>
>>> Bernhard
>>>
>>> Am Donnerstag, 10. August 2017 schrieb Vlad Stelmahovsky :
>>>
>>>> threaded image provider might help
>>>>
>>>> On Thu, Aug 10, 2017 at 12:36 PM, Bernhard B <schluchti at gmail.com>
>>>> wrote:
>>>>
>>>>> Hi,
>>>>>
>>>>> yesterday, I also tried to replace the Base64ImageProvider approach
>>>>> with a subclassed QQuickPaintedItem which paints the image in it's paint
>>>>> method. I imagined that this approach might be faster es no bade64 decoding
>>>>> needs to be done. But unfortunately it looks like as it's performing even
>>>>> worse that way.
>>>>>
>>>>> Bernhard
>>>>>
>>>>> Am Mittwoch, 9. August 2017 schrieb Bernhard B :
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> I would need some help from you guys on how to improve the ListView's
>>>>>> performance. The problem is, that scrolling through my ListView sometimes
>>>>>> feels a little bit sluggish.
>>>>>>
>>>>>> If I only display some text in the ListView's delegate I can scroll
>>>>>> smoothly through my list. But as soon as there is a picture in the
>>>>>> ListView's delegate I notice that I can't scroll smoothly through my list
>>>>>> anymore. That's especially noticable if I try to scroll fast through my
>>>>>> list. Every time I hit a picture while scrolling through the list I can see
>>>>>> that there is a noticable delay until the picture is fully loaded. My
>>>>>> assumption is, that those pictures are the reason why he scrolling feels so
>>>>>> sluggish.
>>>>>>
>>>>>> My application currently works like this:
>>>>>>
>>>>>> * load 20 pictures via REST (pictures are base64 encoded)
>>>>>> * populate list model
>>>>>> * the Image component in the delegate uses a Base64ImageProvider
>>>>>> (self written) to access the model's base64 encoded content and displays
>>>>>> the image
>>>>>> * if the user scrolls past a threshold another batch of base64
>>>>>> encoded pictures is fetched from the server
>>>>>>
>>>>>> I also found this document: http://doc.qt.io/qt-
>>>>>> 5/qtquick-performance.html#rendering and tried to apply as much as
>>>>>> possible. In detail I applied the following changes:
>>>>>>
>>>>>> * removed complex bindings from delegate
>>>>>> * set sourceSize property for Image
>>>>>> * increased cacheBuffer a bit
>>>>>> * profiled with QML profiler and improved a few things
>>>>>>
>>>>>> But still, the ListView feels a bit sluggish. The strange thing is,
>>>>>> that it's most noticable on Android whereas on Windows and iOs it is better.
>>>>>>
>>>>>> Does anyone have an idea on how to improve that?
>>>>>>
>>>>>>
>>>>>> Any help is really appreciated.
>>>>>> Thanks a lot!
>>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> Interest mailing list
>>>>> Interest at qt-project.org
>>>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Best regards,
>>>> Vlad
>>>>
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>>
>>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170811/c6bfb84e/attachment.html>


More information about the Interest mailing list