Lazy Load Images jQuery Plugin
September 3rd, 2007
Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. After reading YUI introduction I though this is cool! After reading through source thought changed to this needs some jQuery simplicity So I stole borrowed couple of great ideas from Matt’s code. Result is Lazy Load plugin for jQuery.
What does it do?
It delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down. This is exact opposite of image preloading. With long pages containing heavy image content end user result is the same. Page feels snappier. Browser is in ready state after loading visible images. No need to wait for n pictures to load.
From Wikipedia: Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used.
That said Matt’s code does much more. I was only after lazy loading and simplicity of use. If you need more features go for YUI.
Show me more!
Demo page is available. For download and usage instructions info see Lazy Load project page. Or check under the hood.
Related entries: Sequentially Preloading Images With jQuery
September 7th, 2007 at 05:27 PM
Will this work on background images as well?
September 7th, 2007 at 11:21 PM
I have not tried but it should work with anything with src attribute. I will setup a test case and see.
September 8th, 2007 at 09:10 PM
Great work!
I’m shortly going to be coding a portfolio site for photography, and I’ll be using a scrollable film-strip as part of the interface. Ideally I’d like to let the images that are visible within the strip load at page load, and then lazy-load the rest as they are scrolled into view, perhaps a configurable number at a time so that they don’t load too slowly.
Hopefully I should be able to use your plugin to do this, although I haven’t looked yet to see how it determines what’s “below the fold”, if it’s only by vertical position then it’s not going to work, and I’ll have to come up with a way to do it myself. Unless you have any ideas and/or will modify your script to work for circumstances like that?
September 9th, 2007 at 01:51 PM
Hiding all elements below the fold and showing when they come above the fold is default behaviour. If you pass another event (such as click) images wont be loaded until they are clicked. This could be used for filmstrip scrolling.
Are you using some filmstrip plugin or just wide page with vanilla browser scrollbars? I could write you some example code.
September 10th, 2007 at 01:46 AM
Suomi Finland perkele. Simple, but good stuff.
September 10th, 2007 at 10:40 AM
Actually I have escaped from Finland to 80 kilometres south. Now located in Tallinn, Estonia. But yeah still close to homeland :)
September 10th, 2007 at 10:00 PM
Marcus: I just committed code to svn which handles sideways scrolling. I am still testing the code before release.
I also added some custom jQuery selectors for :belowthefold, :abovethefold, :rightoffold and :leftoffold. Now you can attach Lazy Load only to those image which are below the fold:
Selectors work with other elements too. If you want to see which paragraphs are above the fold you could do:
Enjoy :)
September 13th, 2007 at 01:40 PM
Great stuff, Mika! Thanks very much! :)
October 17th, 2007 at 01:14 PM
Hi, I’have just started using this plugin and it looks nice, but when I try to use it for a large number of pictures (300 – 500 small .png thumbnails) it works horrible – the page starts choking and it works very slow. Is there any way to solve this problem??
October 18th, 2007 at 05:27 PM
Problem is caused by plugin looping through all previously images when scroll event happens. One solution would be to add configurable upper limit of how many images to check per scroll. This number should be number of thumbnails in one row.
If anyone comes with better idea please let me know.
October 19th, 2007 at 04:53 PM
Rock, check latest from svn. It should help on your problem. I would like to get any feedback.
I introduced new parameter failurelimit. Default value of 0 assumes lazy loaded images are sequential in your web page. Meaning when looping through images and first below the fold is found, plugin assumes all the rest of the images are below the fold too and stops the loop.
There are case where you want to finetune this. If you set failurelimit to 20 loop will continue to check 20 more images after first one below the fold is found.
March 25th, 2008 at 03:27 PM
It would be interesting to display only images that are visible. When I scroll down to the bottom of the page at once only the last image should be shown. This implies a delay for showing an image when scrolling. Only if an image is visible for a certain time it will be shown.
March 27th, 2008 at 10:22 AM
You’re correct. Another option to delay would be to check if image is in (or close) to viewport. Currently I am only checking the fold (bottom of the screen).
Actually I wrote some viewport selectors which could be used for this.
April 1st, 2008 at 08:46 PM
I’ve just about told everyone here at the job to bookmark this page as a great resource for all developers. Keep up the great work.
June 29th, 2008 at 03:31 PM
Following Marcus T comment, I’m using ah horizontal strip of images in a div, with overflow hidden, that scrolls when next/previous buttons are clicked. Also, dimmed half of the next/previous images can be seen on both sides.
Could you explain how I can bind an event that will check which images are within the div boundaries to load them? That would help greatly :)
Thanks for a nifty plugin anyway.