Shaun Peet
Top achievements
Rank 2
Rank 2
Shaun Peet
asked on 14 Jul 2014, 09:15 PM
We have a number of end-users who are photo-happy and like to have single image galleries containing 200 images or more. When loading all these at the same time, the initial loading of the page is noticeably slow and it's hitting the server harder than it should be (creating all those thumbnails - most of which will never be seen).
To combat this, we've enabled paging and for now set the page size to be 40. Initial testing shows that the page load times go from about 7.5 seconds back down to sub-second load. So that's good. However, it creates a new problem for the end-user, which is (to us) unexpected behavior when the slide-show is running (either full-screen or not). We figured that after the 40th image on page 1, then the 1st image on page 2 would auto-magically be the next shown. Instead, the gallery returns to the 1st image on the 1st page (if looping is on) or just stops (if it's off); forcing the user to click "page 2".
Plus, if the end-user has gone full-screen with the gallery, turned on the slide-show, then clicks to go to page 2; it returns back to the non-full-screen version of the gallery with the new set of images.
Having been with Telerik for almost 10 years now, I know you guys can do better :) A couple suggestions...
Option 1:
The control knows whether or not paging is enabled; it should be able to detect the slide-show index AND page index in order to determine what to do when it hits an upper limit. I'd suggest automatically going to the next page and re-starting the slideshow with the first image - basically doing what the end-user (who *will* get confused doing this) would have to do manually. It that causes a page refresh because it's a post-back then so be it, as long as the rotation continues AND the visible state (full-screen or not) is persisted.
Option 2 (even better):
Implement a lazy-loading scenario for the images. It appears that currently, if we were to load 200 images into the control, that upon the initial loading of the page, all 200 thumbnails are created at the same time instead of just the ones that are currently visible in the thumbnail slider. Perhaps a better solution is to load all the images in the slider with a blank src attribute and instead use data-src; then detecting the visibility of the thumbnail to switch the data-src attribute to be the actual src attribute. Since that would break SEO you'd probably want to make lazy-loading an option - however - in our case we don't want SEO on user-submitted image galleries anyway so that would actually be a good thing for search engines to leave them out of their image searches.
Thanks as always for listening :)
Shaun
To combat this, we've enabled paging and for now set the page size to be 40. Initial testing shows that the page load times go from about 7.5 seconds back down to sub-second load. So that's good. However, it creates a new problem for the end-user, which is (to us) unexpected behavior when the slide-show is running (either full-screen or not). We figured that after the 40th image on page 1, then the 1st image on page 2 would auto-magically be the next shown. Instead, the gallery returns to the 1st image on the 1st page (if looping is on) or just stops (if it's off); forcing the user to click "page 2".
Plus, if the end-user has gone full-screen with the gallery, turned on the slide-show, then clicks to go to page 2; it returns back to the non-full-screen version of the gallery with the new set of images.
Having been with Telerik for almost 10 years now, I know you guys can do better :) A couple suggestions...
Option 1:
The control knows whether or not paging is enabled; it should be able to detect the slide-show index AND page index in order to determine what to do when it hits an upper limit. I'd suggest automatically going to the next page and re-starting the slideshow with the first image - basically doing what the end-user (who *will* get confused doing this) would have to do manually. It that causes a page refresh because it's a post-back then so be it, as long as the rotation continues AND the visible state (full-screen or not) is persisted.
Option 2 (even better):
Implement a lazy-loading scenario for the images. It appears that currently, if we were to load 200 images into the control, that upon the initial loading of the page, all 200 thumbnails are created at the same time instead of just the ones that are currently visible in the thumbnail slider. Perhaps a better solution is to load all the images in the slider with a blank src attribute and instead use data-src; then detecting the visibility of the thumbnail to switch the data-src attribute to be the actual src attribute. Since that would break SEO you'd probably want to make lazy-loading an option - however - in our case we don't want SEO on user-submitted image galleries anyway so that would actually be a good thing for search engines to leave them out of their image searches.
Thanks as always for listening :)
Shaun
1 Answer, 1 is accepted
0
Hello Shaun,
Thanks for the suggestions. I would recommend you to log the issue in our Ideas&Feedback portal as a feature request and our developers will look into it and will try to improve the paging functionality.
Regards,
Kostadin
Telerik
Thanks for the suggestions. I would recommend you to log the issue in our Ideas&Feedback portal as a feature request and our developers will look into it and will try to improve the paging functionality.
Regards,
Kostadin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.