0

I am doing an animation where based on the scroll I change multiple background images of a main div amoled-section. Hence, I am doing this by adding a class whenever the scroll hits a trigger e.g. #amoled-section-frame6.Every time when trigger hits#amoled-section-frame6 it adds a class to amoled-section.on-frame6

.amoled-section.on-frame-6 {
  background-image: url("https://image.shutterstock.com/image-photo/portrait-cheerful-male-architect-wearing-260nw-1060056851.jpg");
  z-index: 1;
}

It was working all good until I observed that if I have a multiple image change it will require a time to download the image and will create a glitch effect. The problem that I want to resolve is somehow download background-images of divs before using them and in this way, the background image transition will work fine.

I attached in Codepen a link to the full code, however is not working probably because Srollmagic is not that flexible with Codepen. Link below.

https://codepen.io/obsesie/pen/qBZKzGz

Obsesie
  • 171
  • 2
  • 14
  • You need to look at preloading of images based on ajax or by counting the scrollup r down event. Here https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/#:~:text=JavaScript%20Method%20%232&text=As%20you%20can%20see%2C%20each,as%20many%20images%20as%20necessary. – vinayak shahdeo Sep 15 '20 at 05:50
  • Does this answer your question? [Preloading images with JavaScript](https://stackoverflow.com/questions/3646036/preloading-images-with-javascript) – vinayak shahdeo Sep 15 '20 at 06:05
  • You can preload images using CSS only, instead of using JS. – AbsoluteBeginner Sep 15 '20 at 06:27

1 Answers1

1

I have worked with ScrollMagic.js before and had an issue as same as you have. There are two solutions I prefer.

  1. Embed images with the style of "display: none"

  2. Use javascript to preload those images.

     <script type="text/javascript">
     <!--//--><![CDATA[//><!--
         var images = new Array()
         function preload() {
             for (i = 0; i < preload.arguments.length; i++) {
                 images[i] = new Image()
                 images[i].src = preload.arguments[i]
             }
         }
         preload(
             "http://domain.tld/gallery/image-001.jpg",
             "http://domain.tld/gallery/image-002.jpg",
             "http://domain.tld/gallery/image-003.jpg"
         )
     //--><!]]>
 </script>

There would be other solutions but I hope this would help. Also, this link would be useful for you. https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/#:~:text=JavaScript%20Method%20%232&text=As%20you%20can%20see%2C%20each,as%20many%20images%20as%20necessary.

Kevin Lin
  • 111
  • 2
  • 5