CODEWITHSUNDEEP
javascriptjquerysingle-page-applicationlazy-loading
tommybond
tommybond

Reputation: 650

lazyload.js requiring action to display images on initial load

I am using the lazyload.js library to lazy load images that are dynamically loaded into an infinitely-scrolling view. After I start scrolling and loading the next pages of results, the lazyloading works just fine.

Upon initial load, the images do not lazyload in until some action occurs in the window, be it a slight scroll, clicking on a clickable element in the container, etc. If I put a timer on the call to $('.lazy').lazyload(), it works fine but I do not want to do that (it's very hacky).

After the initial load if I run $(window).resize() from the javascript console, the images load in just fine, but even if I do this in code after the initial load, it does not work.

Is there a way I can force the images to lazyload upon initial loading?

Note that the images are placed onto the page after the initial page load via an AJAX call.

Upvotes: 0

Views: 122

Answers (1)

hashchange
hashchange

Reputation: 7225

I am personally not a fan of lazyload.js (the performance is terrible) but that should actually work out of the box. The loading should be triggered on document ready.

Given that resize doesn't seem to work either, can you verify that these events actually fire? Perhaps something is off with your HTML (doctype, or god-knows-what).

Upvotes: 1

Related Questions