Blog

Lazy Karl v1 - The ultimate cross-browser lazy load plugin for images with jQuery

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.

Demo & Download LazyKarl v1