Lazy owl logic is not working.

CommentFileSizeAuthor
#5 lazy_owl-2366809-5.patch4.93 KBfran seva
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

2pha’s picture

I have this problem too. I can't actually find any code in the back end that even checks this variable.

More detail:
There is an option to lazy load, but it doesn't change the output and the images load as if this option wasn't checked.
As far as I can tell anyway..

Chris Charlton’s picture

Some more detail would be helpful to resolve this ticket.

fran seva’s picture

I'm having the same problem with the lazy loading.
The problem I see is that when I enabled the lazy load (I also have lazy follow activated) all the images in the carousel are being loaded at the same time and it is expected to be loaded just the images in the views view port.

Debugging I see that before JS is executed and before add data-src attribute all images are loaded, so after JS is executed all images will have the data-src attribute but the lazy load will not make sense because all images have been loaded before.

If you need more detail just let me know!

fran seva’s picture

Hi again.
Debugging more I see the error is that drupal is rendering the field using theme_image and this create the img tag with src attribute and here is the problem, the browser see the src attribute and render the file, to fix it we need to set a custom image theme function when owl formatter is being used.

fran seva’s picture

FileSize
4.93 KB

Attach a patch that create custom theme image function that will be used when user set owl formatter to a field.
Basically that theme_xxx create the img tag using data-src instead src.
I have tested in owlcarousel "7.x-1.4" and works.

fran seva’s picture

Status: Needs work » Needs review
fran seva’s picture

After test the behavior with views I have seen that views integration after apply patch [5] is not working correctly. Before the patch the lazy load was not working and after the patch neither.

I have implemented another patch that allow integrate fancybox with owlcarousel.
I'll post it after test it.

Chris Charlton’s picture

@fran seva: any update?

fran seva’s picture

Hi @Chris Charlton
Yes I have updates. My last patch allow use lazy load correctly with fields but when you activate the feature in Views the views templates are using src instead data-src and also are adding tags that are generating problems with owl.

To fix it in my current project I made an override of views templates to render only the img tag with the data-src. I couldn't create the patch but I have in mind do it next week in DrupalCon BCN (Are you going to attend?) I think the patch is easy and will modify the views template that are using currently.

In other hand, I have also integrate owl with fancybox module (I would like to improve it but I need to investigate a bit more fancybox).

The site with an example of that will be launch in a few weeks .
As I said, I'll work in Owl module in DrupalCon BCN and I kwow there are more people that will help,

swim’s picture

The lazyLoad variable check occurs via JS however this has a number of negative effects, possible partial image loading before the src attr is swapped with data-src and not being able to set a pre loading image - which should use the src attribute.

fran seva you're certainly on the right track by providing image theme overrides.

redhatusr’s picture

this seems to work. Its a views template for the image field

views-view-field--field-image.tpl.php

<?php 
	// print $output;
	// dpm ($row->field_field_image);
	$image = image_style_url('medium', $row->field_field_image[0]['raw']['uri']);
?>

<img class="lazyOwl" data-src="<?php print $image;?>" alt="<?php print $row->field_field_image[0]['raw']['alt'];?>" style="display: inline;"/>

You can change the 'medium' to whatever imagecache style according to your needs

fox mulder’s picture

#11 works but w3c validator says:
Error: Element img is missing required attribute src

problem not in this module but in owlcarousel library:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fowlcarousel2.github.io%2F...

Andru’s picture

Turning on the Image Lazyloader module made these images lazyload for me, but otherwise the solution in #11 works and seemed to load image noticeably faster - thanks for that.

	$image = image_style_url('mycustomsize', $row->field_field_art_pic[0]['raw']['uri']);

//hyphens here caused problems, enter with underscore.
//added noscript
?>

<img class="lazyOwl  myclass" data-src="<?php print $image;?>" alt="<?php print $row->field_field_art_pic[0]['raw']['alt'];?>" style="display: inline;"/>
<noscript>
  <img src="<?php print $image;?>" alt="<?php print $row->field_field_art_pic[0]['raw']['alt'];?>" />
</noscript>

Module did not seem to generate noscript tags.

If you are having trouble finding the OwlCarousel V1 js files, see this location: https://www.drupal.org/node/2842234#comment-12093411 for version 1.33, and you can find 1.31 on Jsdeliver.net as well.