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.

Answer 1

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