Lazy loading of images in the slider

[Mark McMillan]

Has anyone used the jQuery lazy load plugin (http://www.appelsiini.net/projects/lazyload) with Sly? In my application there might be hundreds of items in a horizontal list, each with an image. I want to defer image fetch from the server until (if) an item comes into view. The plugin supports containers with scrollable content, but I think it expects the container to control the scrolling, e.g. it expects markup like:

#container {
    height: 600px;
    overflow: scroll;
}

The Sly inner container has overflow:none.

The plugin can also load based on events, but Sly does not seem to have an event when an item comes into view.

Any ideas?

[Sly.js]

There is a rel property on sly ibject, which exposes indexes of first & last visible items in a frame.

I suggest displaying images based on those indexes on load event, and than on change events.

[kolin...@gmail.com]

Mark, did you figure out how to correctly use this plugin with sly.js http://www.appelsiini.net/projects/lazyload? I have the same issue now

[Sly.js]

God damn it guys. You are payed to be programmers. To solve problems. You don't even need any jQuery plugin, only Sly API.

Make your images look like this:

<img src="{placeholder}" data-src="{path}">

I recommend using this as a placeholder. It's a minimal data URI for a transparent gif:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

And than you can make a super simple sly plugin:

function slyLazyLoader(attr, margin) {

attr = attr || 'data-src';

margin = margin | 0;

return function () {

var start = this.rel.firstItem - margin;

var end = this.lastItem + margin;

for (var i = start; i < end; i++) {

if (!this.items[i] || this.items[i].lazyLoaded) continue;

this.items[i].lazyLoaded = true;

setPaths(this.items[i].el);

}

}

function setPaths(el) {

var imgs = el.querySelectorAll('[' + attr + ']');

for (var i = 0; i < imgs.length; i++) {

imgs[i].src = imgs[i].dataset ? imgs[i].dataset.src : imgs[i].getAttribute(attr);

}

}

}

Which can be used like this:

new Sly(container, options)

.on('load change', slyLazyLoader('data-src', 1))

.init();

Or even better, don't use <img> element, use divs, and set their style.backgroundImage instead of src. That way you have more control over styling image dimensions, and don't have to use src placeholders.

Forward 1% of your next paycheck to me, thanks :)

[great...@gmail.com]

Did this work for anybody? Didn't work for me...

init() doesn't work after the .on('load...

Did

[Sly.js]

I didn't tested it, there might be some bugs. Don't just copy & paste code. Understand what's happening and implement it in a way that best suits your case.