jQuery LazyLoad Alternative (minus the scrollbar code)
Hey, What I would like is to use the jQuery plugin: LazyLoad
But, rather than trigger the event on Window Scroll - I would like to trigger it when the el开发者_运维知识库ements come into view.
(I have no scroll bars on my site, so scroll bars are not an option).
Help me before I have no hair left.
EDIT: Ok, so I got it to work - SORT OF - it only seems to work vertically and ONLY WITH THE OVERFLOW SHOWING! *
Your best bet is to set a timer and repeatedly check for image visibility. Or you can make the tracker
function public method and then call it from the outside if something alters.
Change LazyLoad to something like this:
// ...
var elements = this;
if ("scroll" == settings.event) { // <-- you may want to remove conditional block
var tracker = function(event) { // <-- give it a name
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
};
(function repeat(){
tracker(); // <-- so you can use it here
if (elements.length)
setTimeout(repeat, 100); // <-- check every 100ms
})();
}
// ...
精彩评论