“Load more” and “lazy loading” for categories
It works like this: first, 10-30 products are unloaded, then 10-30 products are gradually loaded until the total number of products reaches 50-100. After that, the "Load more" button appears. Clicking on it unloads another 10-30 products and "lazy loading" continues until the next 50-100 products are reached. The "Load more" button appears again. Thus, the threshold of 50-100 products determines when you can interrupt browsing, and "lazy loading" simply optimizes the work, reducing the unloading time and the load on the server.
Please note that it is not by chance that we have specified the number of products to be uploaded as a range. Each web design studio determines the ideal number of products in a particular case. Usually, it depends on the context and specifics of the website. If the online store offers technical japan whatsapp number list products (for example, electronics, hardware, consumables, spare parts, etc.), then it is better to take a smaller value. If the products are more visual (clothing, furniture, decorative elements, etc.), then the list may contain a larger number of offers.
There are a lot of codes and plugins available to implement lazy loading, such as Mikk Tuupola's Lazy Load for jQuery and LazyLoadXT. As a web design studio, we can recommend them to you.
web design studio. Usability analysis example
Crutchfield uses a “Load More” button in combination with “lazy loading.” By default, 20 products are loaded first, and when the user scrolls to the 10th product, the site loads 20 more products. After the 40th product, the user sees a “Load More” button.
Thus, the pages of this online store load quickly, since a small number of products are initially loaded. “Lazy loading” allows users to browse many products in small and medium categories without interruption.
As a result, for certain categories (for example, when applying filters), it will work similarly to the “Show all” button. For longer lists, the “Load more” button will make it easier to view a large number of products (if the user wants to continue browsing), and will also provide access to the footer and the opportunity to rest and apply additional filters to shorten the list.
Web Design Studio: Lazy Loading Has Its Weaknesses
“Lazy loading” has its drawbacks. For example, this method of issuing products, especially with infinite scrolling, contributes to a constant increase in the length of the page. The web design studio that is managing your project must take this into account. When the user drags the slider down, he will see the footer for some 1-2 seconds while the rest of the products are loading on the page. New items will be added to the list, and the footer will go down again. Thus, the page becomes longer.
The test showed that this leads to a fragmented perception of the list. This problem is often solved by adding a “Load More” button, as the user has the opportunity to “rest” after one or two continuous product uploads. If you want to improve this upload template, you will have to “fake” the page height. To do this, you need to multiply the display height of the list element by the number of rows loaded before the next “Load More” button appears (even if these rows have not yet loaded).
This artificial page will initially give the scrollbar enough space and thus more accurately indicate the actual height of the list. It will also provide the user with convenient access to the footer. And “lazy loading” will continue to load products as before, only now they will occupy empty space instead of stretching the page.
“Load More” for Search Results