Demo & Download LazyKarl v1
The lazyKarl jQuery plugin loads a webpage's images once they are within the user's viewport.This is a working cross-browser lazy load jQuery plugin. Other lazy load plugins have been less than effective because some major browsers load all of the images on a page when the DOM loads. jQuery plugins are usually not effective until the Dom is finished loading and only after all the images on the page have already loaded.
The Lazy Karl plugin works around this issue with a less than perfect approach, but none the less a functional one. By leaving the src attribute empty or out of the img tag completely, and placing the path to your image inside the rel attribute, images will never load until they are within the user's viewport at DOM ready and on scroll event. A perfect solution would utilize server side scripts like php, but lazyKarl works great for images.
Usage
Place the following code into the head of your document
The following code is an example of how to write the html. Just wrap the list of images you wish to load lazily with the element that you declared lazykarl on in the head.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
Make sure that you place path from standard src tag value in the rel tag. This is important to how LazyKarl v1 works correctly across multiple browsers. You do not have add the src attribute to the image tag at all.