Images makes a webpage so much heavy that many users avoid visiting sites with lots of images. If it is really necessary to have images on your webpage then we can have some optimizations on or before page load. Like using loosy compressed images, resizing images to the exact dimensions we need and load only those images which are currently in viewport. The last optimization is only possible if your webpage is scrollable and you have images on the whole page. If your page is not scrollable and do not have images on whole page then you should not use this as it will only increase your load time and page size.
So, the best script I have found is written by 'verlok' and available on github for free. There are various usage demos on site. It's really very simple to use the lazy load script.
But remember to include '<noscript>' tag. So that users without javascript can also view your images. There could be few complications which could be avoided if you know basics of javascript and css. These complications arises only because of your current coding of page.
So go to github and check it out : https://github.com/verlok/lazyload