Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

How to lazyload carousel images

17 Jan 2020, 11:28

Hi all,

I am using lazyload.js to load images when they come into the visible part of the homepage. To make that happen, I have included the following code into the custom head part of X3:
Code
<!-- Lazyload images -->
<!--
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
-->
<script src="/content/custom/files/javascript/lazyload.min.js" type="text/javascript"></script>
<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: "img, iframe",
    callback_enter: (el)=>{
      console.log(el, "Hallo");
      var nachher = el.parentElement.querySelectorAll("img")[1];
      
      if(nachher)
        lazyLoadInstance.load(nachher);
    }
});
</script>
<!-- End Lazyload images -->
I have picked img and iframe as elements selectors to lazyload images and iframes (for YouTube). I have already used the callback_enter() hook to get the slider to work with lazyloadjs. Without that hook, only the "before"-image has been lazyloaded but not the "after"-image. Thus, I have manually initialised the lazyload call with "lazyLoadInstance.load".

Though, the carousel widget seems not to work. I have prepared a test page for that: https://ziin-hochzeitsfotograf-duesseld ... ocal/test/

I have enabled logging within the hook to see wether lazyload.js gets triggered or not.

The test page uses a simple image load in the middle of the site:
Code
<div class="row">
<img data-src="./../content/index/20160521_163010_Martina_Sebastian_Shooting_0209.jpg" />
</div>
At the bottom, there is the carousel using the following code:
Code
<div data-carousel data-carousel-items=1 data-carousel-loop=true data-carousel-dots=true
            data-carousel-autoplay=0 data-carousel-responsive=true data-carousel-shuffle=false>
            <div>
                <img data-src="./../content/index/20160521_142410_Martina_Sebastian_Shooting_0032.jpg" />
            </div>
            <div>
                <img data-src="./../content/index/20160521_142704_Martina_Sebastian_Shooting_0042.jpg" />
            </div>
            <div>
                <img data-src="./../content/index/20160521_143821_Martina_Sebastian_Shooting_0091.jpg" />
</div>
        </div>
After loading the site and having a look at the DOM, I see the image tags with the data-src attributes:
Code
<div data-carousel="" data-carousel-items="1" data-carousel-loop="true" data-carousel-dots="true" data-carousel-autoplay="0" data-carousel-responsive="true" data-carousel-shuffle="false" class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer" style="padding-left: 0px; padding-right: 0px;">
        <div class="owl-stage" style="width: 3650px; transform: translate3d(-730px, 0px, 0px); transition: all 0s ease 0s;">
            <div class="owl-item cloned" style="width: 730px; margin-right: 0px;">
                <div><img data-src="./../content/index/20160521_143821_Martina_Sebastian_Shooting_0091.jpg"></div>
            </div>
            <div class="owl-item active" style="width: 730px; margin-right: 0px;">
                <div><img data-src="./../content/index/20160521_142410_Martina_Sebastian_Shooting_0032.jpg"></div>
            </div>
            <div class="owl-item" style="width: 730px; margin-right: 0px;">
                <div><img data-src="./../content/index/20160521_142704_Martina_Sebastian_Shooting_0042.jpg"></div>
            </div>
            <div class="owl-item" style="width: 730px; margin-right: 0px;">
                <div><img data-src="./../content/index/20160521_143821_Martina_Sebastian_Shooting_0091.jpg"></div>
            </div>
            <div class="owl-item cloned" style="width: 730px; margin-right: 0px;">
                <div><img data-src="./../content/index/20160521_142410_Martina_Sebastian_Shooting_0032.jpg"></div>
            </div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev" style="display: none;">prev</div>
            <div class="owl-next" style="display: none;">next</div>
        </div>
        <div class="owl-dots" style="">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>
So, lazyload.js must get triggered as the objects already exists, but I do not understand why (side question: what is the purpose of the cloned objects?).

Could you help me out?

Thanks a lot!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How to lazyload carousel images

18 Jan 2020, 07:05

It's a bit hard to answer this question. First of all, the link you gave is .de.local, which looks like a local version on your desktop. I tried the /test/ page on your live website, and I see some carousel fragment at the bottom. Is it trying to use lazy loading? Does it work without? Lazy loading for "carousel" is a bit more complex than traditional lazy-loading images on scroll (which simply triggers the event on browser scroll, and check if images are within scroll range before loading them). Furthermore, the carousel might depend on SIZE of the images so that it can create it's own size. If not, your image might be HEIGHT 0, in which case they might not even lazy load. There are more modern lazy load solutions for modern browsers today, for example yall.js, which uses "obervers" to detect if images are within viewport, instead of having to run loop-events on all lazy-items on scroll. Finally, I see in your code that you have javascript that triggers on page load ... What happens when you navigate to the page via Ajax (used by X3) from the main menu? You will need to re-trigger initialization on X3-page-load (unless you add the script directly into content, but that is not optimal).

Considering the above, is it really necessary to lazy-load images in your custom content carousel? X3 already has partial lazy-loading anyway, because the images will only start loading after the page is loaded (and displaying). Doesn't seem worthwhile, and it's definitely not a simple procedure.
Without that hook, only the "before"-image has been lazyloaded but not the "after"-image.
It's not clear to me what you mean "before" and "after" images.
After loading the site and having a look at the DOM, I see the image tags with the data-src attributes:
Yes, but surely you are adding data-src up front also? This is how most lazy-loaders work ... Even after the image loads (or not), the data-src attribute will remain for the element.
(side question: what is the purpose of the cloned objects?)
This is how the carousel-plugin creates repeating items, depending on how many items are set to display on screen and/or you are using "loop". For example, if you have 8 images, with three items displaying, loop mode, it will clone first item at the end. There is more to this, but essentially it's about filling in start/end pieces depending on the current view. We are using Owl Carousel 2, which is perhaps a bit outdated, and I will probably replace in a future release.

Sorry if I'm not helpful, but it's a bit difficult to diagnose, and I think perhaps this might be a project which is not worthwhile?
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: How to lazyload carousel images

18 Jan 2020, 10:55

First of all, the link you gave is .de.local, which looks like a local version on your desktop. I tried the /test/ page on your live website, and I see some carousel fragment at the bottom
Yes, you're absolutely right. Forgot to remove the .local domain. I usually develop on a local stack and then push to my production setup.
Sorry if I'm not helpful, but it's a bit difficult to diagnose
You have been very helpful. After naming the plugin you are using for the carousel widget, I was able to make a more specific Google search. Indeed, version 2 deals with lazyload, too. There is a demo page:
https://owlcarousel2.github.io/OwlCarou ... yLoad.html
As your wrapper does not translate lazyLoad=true, I just used a different class name that your widget is not triggered and I manually initialise the carousel once it is in viewport using https://gomakethings.com/how-to-test-if ... avascript/. This was necessary because manually initialising at page load loads always one picture even if not in viewport. So, now, when visiting my webpage https://ziin-hochzeitsfotograf-duesseldorf.de/ only the icon and full page image is loaded.
Considering the above, is it really necessary to lazy-load images in your custom content carousel? X3 already has partial lazy-loading anyway, because the images will only start loading after the page is loaded (and displaying). Doesn't seem worthwhile, and it's definitely not a simple procedure.
All the work-arrounds are only necessary for a single specific marketing landing page. If I would just use galleries and folders, I would not need any lazyloading because it comes out of the box. But the thing is my special page. I had to arrange the content in a specific way making the page very long and loading a lot of pictures. This site will later be shown on Facebook, Google and Instagram as advertisment. The page offers the possibility to contact me at almost every paragraph. As my target audience is mobile first, it is crucial to have only stuff loaded which is shown until now to my future customers. You know the young people from today: no patience at all. If they don't see anything within 1-2 seconds, they think it's not working and go back. You may ask why I am using X3 at all when I am doing such workaround at all places. X3 is my choice to present my whole portfolio to my clients and provide member areas. This leverages everything and I do not need to make any modifications on that part :-). It took me one hour to get it to work after I read your post, so it was worth the effort.
What happens when you navigate to the page via Ajax (used by X3) from the main menu? You will need to re-trigger initialization on X3-page-load (unless you add the script directly into content, but that is not optimal).
I have moved the initialisation to the x3_page_load part, thanks!
It's not clear to me what you mean "before" and "after" images.
This was just pointing out that I got the comparison slider to work using the hook. "Before" is the left, "after" the right picture on the vertical comparison. 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How to lazyload carousel images

18 Jan 2020, 22:17

Nice job! It's working as you want now?

Indeed optimization is crucial, especially for start/landing pages.
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: How to lazyload carousel images

19 Jan 2020, 07:22

Nice job! It's working as you want now?
Thanks! Yes, the site is super fast and it's working nicely.