You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Lazy Loading Scrollable solution. Created Aug 26, 2010

This thread is solved

Views: 1238     Replies: 3     Last reply Sep 9, 2010  
You must login first before you can use this feature

LysanderV

Posts: 2

Registered:
Aug 26, 2010

Lazy Loading Scrollable solution.

Posted: Aug 26, 2010

For anyone interested in implementing a Lazy Load with their JQuery Tools scrollable, I used Mika Tuupola's lazy load plugin (which I had nothing to do with) found at http://www.appelsiini.net/projects/lazyload. The plugin's default functionality basically allows for images below the fold in a page (not visible on the screen) to be loaded when they are close to being visible via mouse scroll/other page nav, using $("img").lazyload().

The lazyload plugin also allows for the lazy load to be triggered on a given event. Basically what I did was using the JQuery Tools api, on the onSeek event I added a trigger on each lazy loaded image - custom JQuery event "Foo". 


api.onSeek(function(event, i) {
     $(LazyItemID).trigger(Foo);
     ...
});

Foo is an empty event bound to the images to lazy load in the scrollable. 


$(LazyItemID).bind(Foo, {}, function(e) { /*...*/	});

Even though Foo is an empty event, when the event Foo is called, lazy load is then triggered for each image Foo was bound to, using lazy load "event" parameter.


$(LazyItemID).lazyload({ 
    placeholder: ... ,
    event: Foo
});

Thats pretty much the gist. I'm sure it could've been done better, but I haven't had the chance to refactor yet.

bpluijms

Posts: 2

Registered:
Sep 9, 2010

» Lazy Loading Scrollable solution.

Posted: Sep 9, 2010

Reply to: Lazy Loading Scrollable solution., from LysanderV
Do you have a working example (DEMO) for us?

I can't get it working with your short description.

Could you help me?

Thanks!

bpluijms

Posts: 2

Registered:
Sep 9, 2010

» Lazy Loading Scrollable solution.

Posted: Sep 9, 2010

Reply to: Lazy Loading Scrollable solution., from LysanderV
Do you have a working example (DEMO) for us?

I can't get it working with your short description.

Could you help me?

Thanks!

LysanderV

Posts: 2

Registered:
Aug 26, 2010

» » Lazy Loading Scrollable solution.

Posted: Sep 9, 2010

Reply to: » Lazy Loading Scrollable solution., from bpluijms
Sorry I actually don't have a working example that I'm able to display at the moment. I do have the source that I'm using.

It's a little more complicated an example than what I posted here since it supports multiple lazy loaded Scrollables per page, however it would work with just one also.


// SELECT ALL SCROLLABLE DIVS ON A PAGE
$("div.scrollable").each(function(idx, item) { //  ITERATE THROUGH EACH ONE ONE BY ONE
    var root; 
    var ItemID ="#"+item.id; // ID SELECTOR FOR EACH SCROLLABLE
    var LazyItemID = ItemID+" "+"img.lazy"; // ANCESTOR DESCENDANT SELECTOR FOR ALL LAZY LOAD IMAGES PER SCROLLABLE
    var FooFunctionID ="foo"+item.id; // HOLDS THE 'FOO' FUNCTIONS UNIQUE NAME PER SCROLLABLE
    
    // INITIALIZE EACH SCROLLABLE AS PER THE USUAL
    // DISPLAY 3 ITEMS AT A TIME
    root = $(ItemID).scrollable({ 
            size: 3, loop: false, clickable: false 
        });

    var api = root.scrollable(); // GET SCROLLABLE API
    
    // WHEN SCROLL TO VIEW MORE ITEMS (CLICKING NEXT, MOUSEWHEELING, ETC), TRIGGER EVENT 'FOO' FOR THIS SCROLLABLE
    api.onSeek(function(event, i) {
        $(LazyItemID).trigger(FooFunctionID);
    });

    // FOO IS AN EMPTY EVENT BOUND TO THE IMAGES TO LAZY LOAD IN THIS SPECIFIC SCROLLABLE
    $(LazyItemID).bind(FooFunctionID, {}, function(e) { /*...*/    });

    // BUT WHEN THE EVENT 'FOO' OCCURS, LAZY LOAD IS TRIGGERED FOR THAT SPECIFIC SCROLLABLE
    $(LazyItemID).lazyload({ 
        placeholder: "images/DefaultBlankImage.jpg", 
        event: FooFunctionID // THE EVENT THAT WILL TRIGGER LAZY LOAD
    });
});

Of note, I initialized each image in each Scrollable differently depending on whether it was to be lazy loaded or not.

Lazy loaded images: 
<img id='imgID' class='lazy' src='DefaultBlankImage.jpg' original='ActualImageSourceURL.jpg'>
and non lazy loaded images:

<img id='imgID' src='ActualImageSourceURL.jpg'>

Think that was pretty much it. Hope it helps.

•