jquery - Load Images Only on Focus/Target -

i have around 300+ images sized 50-100kb each. server taking time load images on page load. how can load images on google books?

it's called "lazy loading". lazy loading of images – resources need shows how using popular js frameworks.

for example, in jquery can lazy load plugin:

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();