Triggering scroll event for Lazy Load jQuery plugin

Question

I am working with Lazy Load to load images only when they are visible and the images that are first visible from a popout menu are not loading. All of the images are located within <li> elements on an unordered list. When I start to scroll down the list, the images start loading as they should. But how do I get the few first images to show when the menu is first opened?

I have tried to trigger the scroll event, along with other events, but none of them have seemed to work. The <ul> is located within a menu that pops out from an "infobar" (just a bar with links at the top of the page). I was thinking maybe this had something to do with the fact that they (the images) aren't readily visible on page load?

Here is my lazyload initialization:

$("img.lazy", this.list).show().lazyload({
  effect: "fadeIn",
  container: this.list,
  threshold: 50
});

$(this.list).trigger("scroll"); // tried this
$(document).trigger("scroll"); // and that

// this.list is the unordered list

I have also tried to initialize the plugin with mouseenter and scrollstop as the event properties, then triggering those events, no luck.

Amit Joki · Accepted Answer · 2014-07-30 14:37:55Z

3

The second this.list is where you are going wrong. Lazy Load works on <img> elements and not on <ul>

$("img.lazy", this.list).trigger("scroll"); // should work

answered Jul 30, 2014 at 14:37

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

2 Comments

Joe Over a year ago

It doesn't seem to make any difference. Maybe because the actual ul isn't visible yet when I trigger the scroll event? When the menu is opened, it has several things to load before it is actually displayed. Going to try it out in a few different places in time

Joe Over a year ago

Yep, it was a combination of what you suggested and what I suspected. If I call trigger after the list is actually visible, it loads the images as expected. Thanks!

Collectives™ on Stack Overflow

Triggering scroll event for Lazy Load jQuery plugin

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related