Even though lazy loads seams to be working when scrolling through the images.
When loading the page on a slow connection, you can see all the images have loaded and all visible before the slider finished loading.

I am happy to send a link to the website via PM if necessary.

Comments

IamOnStage created an issue.

nickonom’s picture

nickonom CreditAttribution: nickonom commented

Hitting the same problem here. It works ok, but the list of the items that show during page loading is not good at all.

RAFA3L’s picture

RAFA3L CreditAttribution: RAFA3L commented

same here

RAFA3L’s picture

RAFA3L CreditAttribution: RAFA3L commented

This work for me

in css:

.owl-carousel {
display: none !important;
}

in js:

$('.owl-carousel').trigger('initialized.owl.carousel').attr("style", "display: block !important");

zakir.gori’s picture

zakir.gori CreditAttribution: zakir.gori as a volunteer and commented

Can you please tell me where you have added your css and js with line number thanks

NicholasS’s picture

NicholasS
Primary language English
Location FL
CreditAttribution: NicholasS as a volunteer commented

So I looked into this, and the previous answers only hide the photos, the browser will still download them so that defeats the lazy loading purpose. The module has a setting to turn on Lazy Loading but does not actually implement a formatter to create the proper markup needed (I reviewed the code).

I got it working by doing the following.
1. Install the https://www.drupal.org/project/image_url_formatter module (This formatter simply outputs an image URL instead of an <img> tag)
2. Go to your view and for the image Field (Content: Image) change it to use the "Image URL" formatter
3. Under "Rewrite results" enable the rewrite and change the text box to <img class="lazyOwl" data-src="[field_image]"> this will create the proper markup needed and Owl Carousel will lazy load the gallery. (If you enabled lazy loading of course under the settings)