0

I have created a jquery animation with a CSS file containing some images (as background images).

To ensure that images are being loaded before starting the animation (also to prevent render blocking css file), I add the CSS file on the fly. I wait for CSS file to be loaded completely and also I use preloading technics for images but both fail. When I test the animation in slow network connection, The animation starts working and images are being loaded during the animation. This is my code logic:

  1. I wait for CSS to be loaded (first block of codes).
  2. I start preloading Images. (loadImages())
  3. I start the animation when all images are loaded (startAnimation()):

JS codes:

//Preloading CSS file before the animation starts:

var link = document.createElement('link');
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.onload = function(){ loadImages(); } // also tried loadImages without ()
link.setAttribute("href", 'banner.css');
document.getElementsByTagName("head")[0].appendChild(link);


//PreLoading images I used in banner.css

var sumImage=0;

function loadImages(){
    var imageFiles=[];
    var images=["map1","map2","map3"];
    for (var i=0; i<images.length; i++){
        imageFiles[i] = new Image();
        imageFiles[i].onload= sumImages(); // also tried sumImages without ()
        imageFiles[i].src="banner/"+ images[i] +".png";
    }
}   

function sumImages(){
    sumImage++ ;
    //Starting animation when I ensure that all 3 images are loaded
    if (sumImage== 3){startAnimation();}
}

I have also removed parentheses when calling sumImages() and loadImages() as my question was marked as duplicate of this question but nothing changed.

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • I have multiple calling of functions in my code. I can not guess which one is similar to the duplicated question. Someone please help me. – Ali Sheikhpour Sep 02 '19 at 12:54
  • It is the `imageFiles[i].onload= sumImages()` one, must be `imageFiles[i].onload= sumImages;`. `link.onload` one is ok as it is. Also remember to `@user` when you want to notify someone in particular (works also with editors and closers). – Kaiido Sep 03 '19 at 01:00

0 Answers0