Lazy Load Inside Container
February 13th, 2009
Matthew Crumley contributed nice patch to Lazy Load plugin which makes it work with containers. If you have a container which has a scrollbar.
#container {
height: 600px;
overflow: scroll;
}
Images which are not visible are not loaded until you scroll to them. Check demo page for horizontal and vertical scrolling.
To use new feature you can give the container as jQuery object.
$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});
Mathew also patched a bug where IE was not always loading images. To upgrade download the latest source, minified or packed.
March 2nd, 2009 at 11:48 AM
Fantastic! Just what I needed for our portfolio site’s overflowed page navigation container! I have also written a patch for the plugin which I did send to you a while ago which contains code for overlaying the placeholder loading image so that its original dimensions are preserved, which you are very welcome to include in the project (or, indeed, improve upon) if you would like to. Thank you for providing such a useful plugin to the jQuery community!
May 8th, 2009 at 08:52 PM
I haven’t gotten to really look through your code, but it would be awesome if it detected if the images were “visible” and wait to load them until an image is “visible” (ie. not display:none, or visiblity:hidden)
Looks really useful though thanks!
May 15th, 2009 at 05:40 PM
russell: That is exactly what the plugin does.
July 16th, 2009 at 02:49 AM
Hi, this is really cool, but ¿is there a way to use a container without the overflow?, what i mean is instead of lazy loading all the images on the page, is there an easy fix to lazy-load just the images inside a div. Thanks!
August 27th, 2009 at 01:52 PM
Hi, is it possible to set up this plugin to start preloading images but only show it when user scrolls to it?
August 27th, 2009 at 07:14 PM
Jani: Lazy Loading is opposite of preloading so I am not sure why you would want to do it. But what you could do is first to wait until all images have loaded. Only then trigger Lazy Load. This will hide the images below the fold. When you scroll down Lazy Load will show them again.
Note that this does not give you any speed improvements. It just does what you described. You can wait until all images are loaded by using $(window).load() instead of $(document).ready()
Try something like:
$(window).load(function() { $("img").lazyload({ placeholder : "img/grey.gif" }); });September 9th, 2009 at 04:40 PM
I see that, by using the lazy loader script, I have two requests per image, when they become visible. Am I doing something wrong, or is it its behaviour?
thanks for the work danilo
September 9th, 2009 at 09:37 PM
danilo:: Probably a bug in jQuery 1.3.x which I have not had time to hunt. Which jQuery version are you using?
October 27th, 2009 at 03:52 AM
@danilo: My bet is that you’re using Firefox and you’re not setting a placeholder image. Firefox has a known issue (debatable whether it’s a bug) whereby removing removing the SRC attribute or setting it to empty will cause a second request for the page. Just follow Mika’s final code example above and add a placeholder image (like a 1×1px gif).
@mika: you might want to either require a placeholder image or make a note in your code about this problem with Firefox.
Thanks for a great plugin!
November 15th, 2009 at 07:51 PM
The plugin does not work. I repeat: the plugin does not work! I do everything as it is told but I don’t get any result on my website. I tried your HTML demo on my website and it worked, but on my coded pages such as index.php it does not work. Please help!
November 16th, 2009 at 10:53 AM
Aistis: So demo page works but you page does not means the plugin does not work? What is the address of you non working page. WIthout seeing it is is impossible to figure out what might be the problem.
November 16th, 2009 at 09:00 PM
This is your demo in my website: http://gamepad.lt/enabled.html , and this is where I use it http://gamepad.lt/?id=1 and it does not work… (By the way, I’m currently working on my website, so don’t be amused by my unfinished template :) )
November 18th, 2009 at 03:59 PM
Aistis: Try to put the call to Lazy Load in the beginning of the html code.
November 18th, 2009 at 04:28 PM
Hi Mika,
Thank you for your great plug-in. I have tried the Wordpress-plugin on my own site where works like a charm.
For some unknown reason it won’t work on another site I have designed. http://www.jolienholthuis.nl is the one that gives me troubles. I have de-activated the plug-in for now, but when I activate it, it will show no images below when I scroll down, just the grey placeholder. I use the standard settings that came with the Wordpress-plug-in. I hope you can take a look at it.
November 18th, 2009 at 06:36 PM
Well I got the same problem as Jeroen. I made a small mistake including the script at first but now it shows a grey background and does not load the images. I’m using the jquery.lazyload.mini.js
November 18th, 2009 at 06:44 PM
Sorry or double-posting but I think I found a glitch. Your code does not want to co-op with Google-Ad sense or with google Administrator tools.
November 19th, 2009 at 07:27 PM
Jeroen: I cannot debug what might be the problem if the plugin is not activated on your site. Make an example page where the problem exists and I can take a look.
November 22nd, 2009 at 04:17 PM
Mika: I made a static version of the wordpress page. You can find it here: http://www.jolienholthuis.nl/lazyload_test/ Note that all links still refer to the dynamic wordpress site with the plugin de-activated. I can see the jQuery/lazyload code replaces images below the bottom of my browser screen with the grey.gif placeholder.
November 26th, 2009 at 11:02 PM
Mika: Thanks for a great plugin! I am currently building a site that kind of depends on your plugin to run smooth, it got lots and lots of picture. The problem I have is that the lazyload doesn’t kick in until all the pictures has been viewed once.
I do a clean refresh, the pictures dont lazyload, load some pictures, refreshes again, and the lazy loader works. Annoying indeed..
Any clues?
December 3rd, 2009 at 09:40 PM
Georgios: Can you give url to page where the problem exitst? When using Lazy Load plugin you should load it and jQuery on the top of the page not the bottom.
December 5th, 2009 at 09:19 PM
How do i make this work in conjunction with a dynamic scrollbar (i useed moo scrollbar) This doesnt seem to detect the images inside my websites container.
December 7th, 2009 at 04:39 PM
MIKA: Thank you for your response!
www.tjallamalla.com/collections/all
December 7th, 2009 at 04:39 PM
MIKA: Thank you for your response!
www.tjallamalla.com/collections/all
December 7th, 2009 at 08:43 PM
Mika: Any suggestions for my problem yet?
January 26th, 2010 at 10:01 AM
I just want to lazy load only work for images on the content container. then I tried to adding this -> container: $ ( ”# main_content”) but images on the sidebar did not come out.