Page Turn Large number of images

[Marc]

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?

[Alex Hajigeorgieva]

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

[Marc]

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

[Alex Hajigeorgieva]

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

[Marc]

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

[Alex Hajigeorgieva]

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

[Marc]

Thanks again Alex!