jQuery LazyLoad Alternative (minus the scrollbar code)

Question

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 elements 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! *

netdoctor.co.uk/health_advice/facts/hairloss_male.htm about the hair issue... — ccppjava
– ccppjava, Commented Jul 14, 2010 at 9:52

gblazex · Accepted Answer · 2010-07-14 10:46:56Z

2

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
    })();
}
// ...

edited Jul 14, 2010 at 10:46

answered Jul 14, 2010 at 10:02

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Barrie Reader Over a year ago

Hi, cheers for this. It seems that this is still binding the visibility to the window scroll method? I have no scroll bars on my site.

gblazex Over a year ago

you can remove event binding and only define tracker function there. But the idea is the same. See my update.

Barrie Reader Over a year ago

I removed the if ("scroll" == settings.event) { line and the corresponding }, but it does nothing. I've initialised it with $('img.link').lazyload(); - no errors, no functionality...

gblazex Over a year ago

I only showed you the door, you need to walk through it. :) works then?

Barrie Reader Over a year ago

haha, sort of - I've updated my question. It only works when overflow is not hidden

|

Collectives™ on Stack Overflow

jQuery LazyLoad Alternative (minus the scrollbar code)

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related