IssueTracker

Hi

Requested Feature

Add a viewport prioritize to media (mostly images) there are on the display, WHILE there are other images are actively loading in the queue.

Issue

When you have a product list showing 10 products on each load, you will have 10 images when you reach out to load point (by scrolling). Assume you scrolled fast and skipped to next 10 products. Now by current lazy loading system, browser tries to load all 20 images if you are somewhere near to bottom. To see the image in your viewport, you have to wait all other images.

Motivation

User experience should focus on user behaviour. One can easily scroll down fast and skip some products. Even by seeing their names irrelevant, this behaviour can occur. To display the content that end user interest, should be the focus.

Requested Solution

If we could only set loading priority to the images in the viewport, we won't be have to wait for all other images that we are not looking currently. Current system does something similar to that on initial load. However, on lazy load, you still have to wait for all actively loading images to see the image in your viewport. In the example scenerio, to see 1 image, you have to wait 19 other images to be loaded.

Sample Pen

This quick pen example built for testing different solutions to this issue. You can easily see, if you scroll down a little fast (on a slower network), in order to see image in your viewport, you have to wait for other images. You can check the loading order in network tab.

[Handlebars templates](Lazy Load Performance (codepen.io))

Side Note: Pen is still under testing. Some features may be added/removed in future.

*** Side Note: Issue Tracker system's Template selection only shows "unnamed template".