Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Lazy owl logic is not working.
Comment | File | Size | Author |
---|---|---|---|
#5 | lazy_owl-2366809-5.patch | 4.93 KB | fran seva |
Comments
Comment #1
2phaI 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..
Comment #2
Chris CharltonSome more detail would be helpful to resolve this ticket.
Comment #3
fran seva CreditAttribution: fran seva at Bluespark commentedI'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!
Comment #4
fran seva CreditAttribution: fran seva at Bluespark commentedHi 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.
Comment #5
fran seva CreditAttribution: fran seva at Bluespark commentedAttach 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.
Comment #6
fran seva CreditAttribution: fran seva at Bluespark commentedComment #7
fran seva CreditAttribution: fran seva at Bluespark commentedAfter 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.
Comment #8
Chris Charlton@fran seva: any update?
Comment #9
fran seva CreditAttribution: fran seva at Bluespark commentedHi @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,
Comment #10
swim CreditAttribution: swim commentedThe 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.
Comment #11
redhatusr CreditAttribution: redhatusr commentedthis seems to work. Its a views template for the image field
views-view-field--field-image.tpl.php
You can change the 'medium' to whatever imagecache style according to your needs
Comment #12
fox mulder CreditAttribution: fox mulder commented#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...
Comment #13
Andru CreditAttribution: Andru commentedTurning 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.
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.