How to implement large images lazy loading?

Hello! Never used it, but this is urgent, because I need to perform the test task. Please enter the position and help to understand. Sent a job, I'm interested in the next part:

You need to write the landing page on any subject. One text block, two graphic
with a large number of images (large image is desirable
implement lazy loading).


I don't know what you mean by "large image, it is desirable to implement lazy loading"? If I'm not mistaken, lazy loading is used for all images which appear as you scroll the page. Is it possible to apply to individual images?

If I'm wrong, how is this implemented? In General, where there is good material on this subject? I understand that the Google to help, but we just don't have time to surf the web. Thank you in advance.

June 3rd 19 at 19:02
1 answer
June 3rd 19 at 19:04
1) in CSS, a similar effect is done using the background-image; I must say that the background picture search engine, such as, but not indexed.
2) is/jQuery there are a bunch of plugins, but they all replace the IMG tag that can badly affect search engine optimization of images. It is especially annoying if they are original.
, 1) you Can read more about background-image, it is not clear how to use css, you can do lazy loading without js?

2) understand How to replace the IMG tag, and then what on the page is displayed? - antonina_Aufderhar87 commented on June 3rd 19 at 19:07
1) is usually background images are loaded last, as it appeals to them

qaru.site/questions/51117/are-unused-css-images-do...

https://web-standards.ru/articles/front-end-perfor...

2) more precisely, replaces the src attribute of the img tag. Src is written is either base64-image (can be a low-res copy, or even a single-pixel GIF), and the attribute data-src - the url of a normal picture. SS scan the src attribute; like, they can parse and execute js, but it's not exactly (at least about indexing I'm not sure).

There is a plugin responsively lazy, it does not replace the original src, and use the alternative attribute. Look at it - gia_McCullough commented on June 3rd 19 at 19:10
1) is something I do not understand about the background, i.e. you want to say that if the layout is first the element with the background, then image, then the element with the background to boot after loading the image? ) Sorry to intrude, but I do not understand where the lazy loading? - antonina_Aufderhar87 commented on June 3rd 19 at 19:13

Find more questions by tags JavaScriptHTMLCSS