Lazy Load With Effects

March 17th, 2008

You can now add some oomph to your Lazy Loaded images. New effect parameter accepts any jQuery effect. When lazy image is loaded plugin will make it appear using chosen effect. Obviously effects such as fadeOut wont work. Use only effects which make image appear, not disappear.

$("img").lazyload({
    placeholder : "img/grey.gif",       
    effect      : "fadeIn" 
});

To see code above at work, check fadein demo. Are there any other features you would like to see? Leave a comment.

Related entries: Delayed Loading of Images, Lazy Load Sideways, Preload Images Sequentially With jQuery

Tagged with javascript jquery

8 Responses to “Lazy Load With Effects”

  1. Jeroen Coumans says:
    March 19th, 2008 at 11:57 PM

    Hi, just wanted to thank you for a great plugin! I’m using it on my portfolio (see http://jeroencoumans.nl/portfolio) and it really makes a difference!

  2. Mika Tuupola says:
    March 24th, 2008 at 02:33 PM

    Good stuff you have there. I still have some improvement on my TODO list. One of them is possibility to use any html string as placeholder. Currently placeholder can only be an image.

  3. Ulrich says:
    April 8th, 2008 at 04:34 PM

    Hi,

    I LOVE the thought of not wasting server resources for images nobody is looking at. So I tried your plugin with a page where some content is hidden in tabs that are invisible (done with tabs ui). To make things worse, the content of each tab is switched with jcarousel. When the page loads, only the first article on the first tab is visible. The rest requires the user to either click on another tab or to cycle through articles inside a tab .

    I was hoping that lazyload would take care of loading the images only when they become visible, but that does not work. Is this due to lazyload’s way of checking the viewport i.e. will it not work with tabs “by design” or is there a chance to make it work with tabs and/or carousel?

    Regards, Ulrich

  4. Mika Tuupola says:
    April 10th, 2008 at 08:44 PM

    I am not familiar with UI tabs internals. But if there was an example page online I could check would it be possible to make Lazy Load work with tabs.

    By design Lazy Load checks position of images in the html page. If image is out of bounds it will not be loaded.

  5. Ulrich says:
    April 15th, 2008 at 07:15 PM

    Hmm, i guess tabs are also considered to be inside the viewport, even if they are invisible/hidden, so in this case it will not work with lazyload …

    The live example is at www dot internetcologne dot de (the tab/carousel stuff is the first thing you see on the page). The page also has additional Spry stuff on it for some undisclosed reasons … To make sure that Spry is not causing the problems I fiddled around to create a stripped down version. It looks awkward, but is easier to look at than the live site. In the test page, the images are called in ascending order ([1-14].jpg). The stripped page is at www dot internetcologne dot de slash lazyload. Although I am not asking you to do our homework, a little push into the right direction would be appreciated. Thanks!

  6. garyl says:
    May 30th, 2008 at 10:03 AM

    Hi:

    It seems that lazy load doen’t work if all images in

    has overflow:auto turn on. So is there any hint for it?

  7. garyl says:
    May 30th, 2008 at 10:06 AM

    What I mean is if a div has css property: overflow:auto there. Lazy load will not work.

  8. Mika Tuupola says:
    May 30th, 2008 at 09:13 PM

    Might have something to do with how dimensions plugin works. Will investigate a bit.

Leave a Reply