tuupola/jquery_lazyload — pull request #94 by jrudenstam (2013-02-11 21:16:07+00:00)
Title: More flexible way to pass events?

There is possibly reasons not to do this but this is what i needed when i used jquery_lazyload with List.js. In my case List.js changes images in view when filtering or sorting.

With current jquery_lazyload you could do something like this:

$(function() {
$("img.lazy").lazyload({
event : "myEvent"
});
});

$(window).load(function() {
$("#list").bind("listUpdated", function() {
$("img.lazy").trigger("myEvent");
});
});

...to listen when list is updated and possibly unloaded images in view. But it seems a bit unnecessary to trigger an event on every image when it is really the list that changes.

Since it is possible passing events to jquery_lazyload it seems only reasonable to be able to define on witch element the event is fired.

Like this:

$("img.lazy").lazyload({
events: [{
bindTo: window,
event: "scroll resize load"
}, {
bindTo: "#list",
event: "listUpdated"
}]
});

And if you need to add events to images you can just omit the "bindTo" property or pass a single string.

$("img.lazy").lazyload({
events: [{
event: "click" // On placeholder click
},
"mouseover"] // On placeholder mouseover
});

This design suggest that the user is in total control over when the images will try to load. It might be a god idea removing the resize and load events in the source and instead use them as default setting. I can think of use-cases it would be better not to force image load on window.resizewindow.load.

In default settings:

events: [{bindTo: window, event: "load resize scroll"}],