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


34 Responses to “Lazy Load Images jQuery Plugin”

  1. James says:

    Will this work on background images as well?

  2. Mika Tuupola says:

    I have not tried but it should work with anything with src attribute. I will setup a test case and see.

  3. Marcus T says:

    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?

  4. Mika Tuupola says:

    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.

  5. Velmu says:

    Suomi Finland perkele. Simple, but good stuff.

  6. Mika Tuupola says:

    Actually I have escaped from Finland to 80 kilometres south. Now located in Tallinn, Estonia. But yeah still close to homeland :)

  7. Mika Tuupola says:

    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:

    $("img:belowthefold").lazyload()

    Selectors work with other elements too. If you want to see which paragraphs are above the fold you could do:

    console.log($("img:abovethefold"))

    Enjoy :)

  8. MarcusT says:

    Great stuff, Mika! Thanks very much! :)

  9. rock says:

    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??

  10. Mika Tuupola says:

    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.

  11. Mika Tuupola says:

    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.

  12. Emilio says:

    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.

  13. Mika Tuupola says:

    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.

  14. Real Estate Postcards Guy says:

    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.

  15. Gemp says:

    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.

  16. Maniquí says:

    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.

  17. Mika Tuupola says:

    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.

  18. Marco says:

    hi any clue on how to get the images inside a scrolling div with overflow hidden to be lazy loaded ?

  19. Mika Tuupola says:

    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.

  20. rg says:

    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

  21. Mika Tuupola says:

    I have not used stepcarousel plugin so I do not know how it works. However what you describe sounds like it is doable.

  22. David says:

    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.

  23. rg says:

    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..

  24. Mika Tuupola says:

    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?

  25. Pablo says:

    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!

  26. Mika Tuupola says:

    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.

  27. dmitry says:

    hey, just wondering if it may be possible to specify a class as a placeholder.. let me know what you think.

  28. dmitry says:

    a css class, that is.

  29. anti-pixel says:

    thanks for this plugin ^^ i hope it will be soon jquery 1.3 compatible !

  30. mike says:

    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!

  31. martin says:

    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

  32. Johan says:

    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?

  33. Chris says:

    Nice plugin – when will it support jQuery 1.3?

  34. eachp says:

    very good plugin

Leave a Reply



(will not be published)



(you can use Textile for formatting)