Page Turn Large number of images

7 posts, 1 answers
  1. Marc
    Marc avatar
    148 posts
    Member since:
    Sep 2016

    Posted 04 Jan Link to this post

    Hi, I'm trying to use Pageturn effect on a large number of images (200). It is very slow and almost does not show the effect at all. Is there any limitation with this effect?
  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    233 posts

    Posted 06 Jan Link to this post

    Hello Marc,

    Please accept my apology for the delay in responding.

    I believe that you should not be experiencing any performance issues with 200 pages when using the Page Turn of the Kendo UI Effects. 

    I tested it with 300 records and the page turn seems to be working as expected:

    http://dojo.telerik.com/iTuBU

    Could you let me know if the behaviour is browser specific or share any relevant additional information? It would be most helpful if you can modify the provided Dojo so it represents your scenario as best you can and return the newly generated URL from the address bar, so I can investigate locally.
     
    Look forward to hearing back from you.

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualisation (charts) and form elements.
  3. Marc
    Marc avatar
    148 posts
    Member since:
    Sep 2016

    Posted 09 Jan in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    Thanks for checking this. For some reason it's not working as expected for me, however the images I'm using are Base64 encoded and being stored in the browser memory, so I believe that it causing the issue.

    Thanks again!

    Marc

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    233 posts

    Posted 09 Jan Link to this post

    Hello Marc,

    I ran another test by storing 309 images and retrieving them and the result is quite decent, perhaps a bit slower but nothing major:

    http://dojo.telerik.com/ERoSi

    However, note that eventually, the browser runs out of memory if the image I use is bigger or if the count of images is larger. With the help of this site, I estimated that Chrome's local storage will be able to save around 340 images of my test image (11.1KB 379x 385) which results in 15 266 encoded characters of the available 5 200 000.

    The exception that you will get is Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of [yourValue] exceeded the quota.

    The images encoded this way are around 30% larger and up to 6 times slower to retrieve on mobile browsers, so it may be worth considering other means of storage if your implementation allows it.

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualisation (charts) and form elements.
  5. Marc
    Marc avatar
    148 posts
    Member since:
    Sep 2016

    Posted 10 Jan in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    The images are not being stored in local storage, but the browsers memory. We have a webservice which returns around 200 images (about 80mb on data). This is what caused the slowness. I changed it to only return 50 images (around 20mb of data) and the page turn worked absolutely fine. I changed our design, so every time the user reaches the end of the images, we load another 20, and this works fine. 

    Thanks again for the help, you really went above and beyond. thank you!

    Marc

  6. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    233 posts

    Posted 10 Jan Link to this post

    Hi Marc,

    Sorry, I assumed that it was localStorage. Nonetheless, it has been a pleasure looking into it. 

    Your solution seems perfectly fit for the purpose and I am glad it worked fine in the end.

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Marc
    Marc avatar
    148 posts
    Member since:
    Sep 2016

    Posted 10 Jan in reply to Alex Hajigeorgieva Link to this post

    Thanks again Alex!
Back to Top