Level 50
Lazy loading images is not that hard and there are tons of free scripts for that.. simply google lazy load images or something like that..
They usually have the real image URL in a data attribute, and when you scroll close to them, they take the URL from the data attribute and put it in the src attribute.
<!-- default -->
<img src="transparent.png" data-url="/img/banana.jpg">
<img src="transparent.png" data-url="/img/flower.jpg">
<img src="transparent.png" data-url="/img/dog.jpg">
<!-- scrolled too -->
<img src="/img/banana.jpg" data-url="/img/banana.jpg">
<img src="/img/flower.gif" data-url="/img/flower.gif">
<img src="/img/dog.png" data-url="/img/dog.png">
1 like
