Aos: When using lazy loading, AOS does not work.

[iaremarkus]

Hello Michal
Thanks for your great script :)

I've noticed some loading/triggering issues when using this lazy-load method. <img src= is replaced with <img data-src and the handy lazy load snippet handles the rest.

However AOS then fails to trigger on load.

This is:

• Bug

Specifications

• AOS version: next (but most fail)
• OS: Any
• Browser: Any

Expected Behavior

It should work as normal.

Actual Behavior

Elements that contain lazily-loaded images, fail to have the AOS animations. However when resizing the window, animations kick in correctly.

Steps to Reproduce the Problem

1. Implement the lazy-load script, by placing this in the footer:

<script>
(function(w, d){
    var b = d.getElementsByTagName('body')[0];
    var s = d.createElement("script");
    var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.15.0";
    s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
    w.lazyLoadOptions = {/* Your options here */};
    b.appendChild(s);
}(window, document));
</script>

1. Replace all <img src=, with<img data-src=

Detailed Description

I have tried triggering a window resize event. I have tried triggering a window resize event after 10 seconds. I have tried using the .refresh. and .hardRefresh methods on window load, and 10 seconds after window load.

Nothing helps.

Possible Solution

[amlichner]

Yes, I am having the same issue as of about 7 days ago. Here is a video of the issue…
https://www.dropbox.com/s/26u8r86icmqnvcy/aos-issue.mov?dl=0

I am using Chrome Version 68.0.3440.106 and Safari Version 12.0

[agnieszkabugla]

In my project I use lazy loading library: jQuery & Zepto Lazy v1.7.10 http://jquery.eisbehr.de/lazy/
where all the images, and even div elements with background image have data-src tags.
But I also use aos library and everything works fine

<div class="graph-10 lazy" data-src="../images/graph-10.png" data-aos="zoom-in" data-aos-duration="3000" data-aos-delay="50"></div>

Try to remove lazyloading and attach the image the normal way using src tag and then check if aos works the way it should work ;)

[iaremarkus]

Removing lazy-loading, isn't the solution I'm hoping for @agnieszkabugla :) I'd also prefer to keep using the next-gen method I'm currently using, which is also a vanilla JS option.

Because of this break, I'm not using the lazy-loading on my site and using the normal src tag and its working fine. It's only when implementing the above lazy solution, that AOS fails.

Hopefully @michalsnik has the solution.

[agnieszkabugla]

I agree that removing lazy-loading is not a solution, but if in your project, aos works without lazy-loading, then i believe it's the issue with lazy-loading, not aos itself. However I may be wrong ;) If I were you, I would try to lazy load all the images in a different way ;)

[kteterycz]

@wondergryphon have you tried something like this? It seems to work for me.

new LazyLoad({  
  callback_load: function () {
    AOS.refresh();
  }
});

[Aziz-JH]

I got the same problem currently with <img> and the loading="lazy" attribute.

This fix works fine for me after AOS.init():

document.querySelectorAll('img')
    .forEach((img) =>
        img.addEventListener('load', () =>
            AOS.refresh()
        )
    );

[tmwebwizard]

I got the same problem currently with <img> and the loading="lazy" attribute.

This fix works fine for me after AOS.init():

document.querySelectorAll('img')
    .forEach((img) =>
        img.addEventListener('load', () =>
            AOS.refresh()
        )
    );

This simple solution worked for me. Thank you @Aziz-JH