Загружать изображения только на фокус / цель

Question

У меня есть около 300+ изображений размером 50-100 КБ каждое. Сервер загружает все изображения при загрузке страницы. Как я могу загрузить изображения, как в книгах Google?

Answer 1

Это называется "ленивая загрузка". Ленивая загрузка изображений - необходимые ресурсы показывает, как это сделать, используя самые популярные платформы JS.

Например, в jQuery вы можете сделать это с помощью Ленивый плагин загрузки :

HTML:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
...
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"
     width="640" heigh="480">

JS:

$("img.lazy").lazyload();