The correct output of materials from the database

Question

From the database you need to bring the goods, which have 3-4 photos in the item card.

It looks like this:

Such products are loaded by default immediately 12 - And this immediately 36 photos.

What is the best way to implement a conclusion so that materials load as fast as possible?

because when scrolling the page, 3 more materials are added.

I need from you advice on the rapid withdrawal of goods. I need to display them as quickly as possible.

For example, lazy loading: load images only if they are in the viewport.
And the conclusion from the database here has nothing to do with it - unloading 36 references to a photo and putting them in the data attributes is not so difficult.
@Maqsood for the second part of the question - Create an additional question and describe how your data is stored and how you are going to do the filtering.

Mihanik71 Mihanik71 3,200 12 32 · Accepted Answer · 2016-08-12T19:09:13

First, you need to trim the image to the desired size so as not to overload it.

There are 2 options to quickly render the page in your case (if you are worried about the images):

Use lazy upload - initially a block is created in which the link to the image is specified, but there is no its own. A background is hung on the block, which shows that the image is being loaded, and after the page has been completely drawn, we start loading images into blocks.
First we load the first images and specify the links to the rest in js and after the page has been completely drawn, we begin to load the rest of the images.

1 answer 1