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.
October 10th, 2008 at 05:47 PM
Hi. Could it be possible to use lazy loading for overflowed elements? For example, in a carousel-like image slider, the images that aren’t being displayed won’t be loaded until scrolling to them.
It would be great if Lazy Load could be combined with jQuery scrollTo series.
Thanks.
October 18th, 2008 at 12:28 PM
Maniquí: Good idea. If I only can figure out how to select images which are overflowed and currently not visible. Any pointer would be welcome.
November 14th, 2008 at 03:23 PM
hi any clue on how to get the images inside a scrolling div with overflow hidden to be lazy loaded ?
November 14th, 2008 at 04:11 PM
Marco: If there is a way to know when images are not visible because of overflow. I do not know how to do it but if you can give me a hint it should be easy to update Lazy Load plugin.
December 20th, 2008 at 10:33 AM
what if u know the size of the diw and also your pictures size useing carusel lide galery so u just hawe to calculate what would fall in wiew somehow… let say klick slide to panel by 3… then u could calculate somehow with js thet wich panels are in wiew and lasy load them … not possible? seems loot of people would use for simmilar purpouse this plugin .. would be cooll to somehow makit work or implement it in stepcarusel jqery plugin too….
THANX IF ANY HELPPPPPPPPPPP…
December 20th, 2008 at 10:34 PM
I have not used stepcarousel plugin so I do not know how it works. However what you describe sounds like it is doable.
December 26th, 2008 at 09:47 PM
I am having the following problem when using “Lazy Load”: If I don’t specify a ‘placeholder’ setting, when the images below the fold get their ‘src’ attribute set to ”” (empty string) Firefox actually sets the ‘src’ to the URL of the current page (or maybe the ‘baseURI’ attribute) forcing a call to the server to load the page that was just loaded. Am I missing something? Thank you.
December 31st, 2008 at 02:45 PM
wel u could see on my website what i was talking abaut… i stil didnt use lasy load couse i couldnt implement it in step carusel basiklie is a horisontal picture slider.. but if hawe 100 or so pictures would really help out lazy load if could get it work horizontaly… nobodie really post pictures under eachoder unless blogs.. but for anibodie in the photograpy or fashion is common horisontal display pix… look at GUCCI website lasyload vith prototipe..wery niceli done.. but i like jQary so would be cool if you could halp us all out with a proper horisontal way of inplementing it maybe also if is in a div and is hiden..when is in wiew.. http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm here is the plugin link what i was talking abut… please take a look would greatlyyyyyyyyyyyyy help out if u could come up with any ideas… im shure many who posted here seemed they wanit to implement it in horisontal or simmilar way.. THANXXXXXXXXX SOOO MUCHHHHHHHHHHHHH…PLEASE HELP..
January 11th, 2009 at 07:52 PM
David: Sorry it took a while. Was having a long vacation.
Actually the src attribute is removed altogether. This is because (IIRC) if it was set as empty string IE behaved exactly as you described. What version of FF you are referring to?
I also tried to reproduce the problem by removing placeholder parameter in one of the demo pages. Problem did not occur with OSX FF3. Do you have example page somewhere online which I could test?
January 16th, 2009 at 12:12 AM
Hi,
One thing about placeholder image: it keeps the same size as the source image it replaces. I tried it with images like those generated at www.ajaxload.info, but the end result is really dirty: a 16×16 image displayed at 800×600.
Nice plugin though, thanks!
January 21st, 2009 at 10:14 AM
Pablo: I usually use some 1×1 pixel image as placeholder. Then the stretching does not matter. It just fills the area.
Using an ajaxloader image is a good idea though. I guess I will update the code to allow that. Thanks for notifying.
February 22nd, 2009 at 09:07 AM
hey, just wondering if it may be possible to specify a class as a placeholder.. let me know what you think.
February 22nd, 2009 at 09:08 AM
a css class, that is.
March 11th, 2009 at 04:15 PM
thanks for this plugin ^^ i hope it will be soon jquery 1.3 compatible !
June 4th, 2009 at 12:11 AM
hi thanks for the plugin, it works brilliantly with a scroll down list of images but i’m trying to combine it with this (http://phase-change.org/jquery.gridlayout/) and they don’t seem to like each other! any ideas? i guess it’s because the images aren’t in the right order anymore, so yes any pointers would be greatly appreciated! thanks again!
September 22nd, 2009 at 12:32 PM
It works great thanks for sharing! I too am trying to get it to work with jquery gridlayout – I read thats its because the images are contained in a div the scroll isn’t being registered, do you think there’s a work around for this? Thanks
September 29th, 2009 at 09:36 AM
Great plugin! But just waiting on the new version to be released; there seems to be a “I am working on it” on the project page but it doesn’t seem to be supported anymore… Any news?
October 26th, 2009 at 05:02 AM
Nice plugin – when will it support jQuery 1.3?
December 24th, 2009 at 07:41 AM
very good plugin