Lazy Load images break parallax effect in Divi
-
With the “Lazy Load Images” checkbox checked on in Divi theme, the parallax effect on this page break. It move the content way down below the fold. It was suppose to look like this screenshot:
https://res.cloudinary.com/kikibres/image/upload/v1554231898/AboutUsparallaxeffect.jpgThe parallax effect that I used from (https://www.elegantthemes.com/blog/divi-resources/ultimate-guide-to-using-parallax-with-divi) is called
CSS method. This method uses CSS to fix the background image in place while the other elements on the page scroll normally. This gives the impression that the content is moving in front of the background image.I tried to fix it by adding the
data-no-lazy="1"to the image via a code module:
`<script>
jQuery(‘.lazy-ignore img’).attr(‘data-no-lazy’,’1′);
</script>`However, it didn’t work.
The page I need help with: [log in to see the link]
-
I just figured out the problem. There’s a empty
tag in the code in the parallax section. When you turn on any LazyLoad plugin, the plugin add a lazyload class to the
tag. Once it’s added to the empty
tag, the page thinks that this empty
tag has a real image inside, thus ballooning up the parallax height. The only way is to add a different class to the section where parallax is located in. Then type in something like
.exclude_lazyload img { height: 0px; }One quick question, did you encounter any problem when a lazyload plugin is on but the fullwidth header with background video in the hero section is taking a while to load….?
- The topic ‘Lazy Load images break parallax effect in Divi’ is closed to new replies.
