When using lazy loading, AOS does not work.

[iaremarkus]

trafficstars

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>

2. 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

[fairy-code-mother]

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

[lekha-paudel]

I am also having the same issue with the ODOO frontend website. Everything with the data-* attribute is not loading; but when resizing/refresh/reload the page; the viewport loads with desired effects.

[AashishSinghal]

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

this did not work for me when I placed this code in my react nextjs app inside the _app.js file inside the React.useEffect function

[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

this did not work for me when I placed this code in my react nextjs app inside the _app.js file inside the React.useEffect function

[tmwebwizard]

You are not just lazy loading images in React, you are lazy loading data.

Remove aos first and then import again:

https://shanelonergan.github.io/animate-on-scroll-react/

Then think about the component that you are animating. I assume to refresh the given page in React, you can update the state in a component. Here is an example of a shopping cart component:

https://upmostly.com/tutorials/how-to-refresh-a-page-or-component-in-react

See if this can help you.

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

this did not work for me when I placed this code in my react nextjs app inside the _app.js file inside the React.useEffect function

https://upmostly.com/tutorials/how-to-refresh-a-page-or-component-in-react

[peseotni]

I am also having the same issue with the ODOO frontend website. Everything with the data-* attribute is not loading; but when resizing/refresh/reload the page; the viewport loads with desired effects.

Hi I am also having the same problem with lazy loading on Version 13 and 14 of Odoo. Any help would be appreciated.

[alexis-822]

I have a problem on WordPress with the generatpress theme. I added this code and I still have this bug on the images:

<script>
  AOS.init({
	once: true
	});

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

Do you have solution please ?