JavaScript Frame Animation blinkt beim Laden

Question

Hier ist der CodePen der Animation. Es blinkt für den ersten Zyklus der angezeigten Frames. Gibt es eine Möglichkeit, dies zu verhindern?

Jede Hilfe würde sehr geschätzt werden!

let frames = [ 
 
"http://i.imgur.com/QhvQuaG.png", 
 
"http://i.imgur.com/VjSpZfB.png", 
 
"http://i.imgur.com/Ar1czX0.png", 
 
"http://i.imgur.com/ROfhCv4.png", 
 
"http://i.imgur.com/6B32vk7.png", 
 
"http://i.imgur.com/2t5MWOL.png", 
 
"http://i.imgur.com/a9wLBbc.png", 
 
"http://i.imgur.com/OBKcW8f.png", 
 
"http://i.imgur.com/RC6wLgw.png", 
 
"http://i.imgur.com/2HyI8yS.png"]; 
 

 
let startframe = 0; 
 

 
function arrow(){ 
 
let start = Date.now(); 
 
let timer = setInterval(function() { 
 
    let timePassed = Date.now() - start; 
 
    if (timePassed >= 20000) { 
 
    clearInterval(timer); // finish the animation after 2 seconds 
 
    return; 
 
    } 
 
    move(); 
 
}, 200); 
 
} 
 

 
function move(){ 
 
    if (startframe==(frames.length-1)){ 
 
    startframe=0; 
 
    } else { 
 
    startframe++; 
 
    } 
 
    // document.getElementById('continue').style.backgroundSize = "100%"; 
 
    document.getElementById('continue').style.background = "url(" + frames[startframe] +")"; 
 
    document.getElementById('continue').style.backgroundSize = "100%"; 
 
}

#continue { 
 
    width: 80px; 
 
    height:40px; 
 
}

<div onclick = "arrow()">Start</div> 
 

 
<div id="continue"></div>

Answer 1

Wenn Sie auf die Netzwerkregisterkarte Ihrer Browser-Entwicklungstools schauen, sehen Sie, dass das Blinken geschieht, wenn der Browser die Bilder lädt.

Sie sollten alle Bilder vorzuladen, bevor die Animation beginnen, etwa so:

let frames = [ 
 
    "http://i.imgur.com/QhvQuaG.png", 
 
    "http://i.imgur.com/VjSpZfB.png", 
 
    "http://i.imgur.com/Ar1czX0.png", 
 
    "http://i.imgur.com/ROfhCv4.png", 
 
    "http://i.imgur.com/6B32vk7.png", 
 
    "http://i.imgur.com/2t5MWOL.png", 
 
    "http://i.imgur.com/a9wLBbc.png", 
 
    "http://i.imgur.com/OBKcW8f.png", 
 
    "http://i.imgur.com/RC6wLgw.png", 
 
    "http://i.imgur.com/2HyI8yS.png" 
 
] 
 

 
var startframe = 0 
 
var images = [] // This array will contain all the downloaded images 
 

 
function preloadImages() { 
 
    var loaded = 0 
 
    for (i = 0; i < frames.length; i++) { 
 
     images[i] = new Image(); 
 
     images[i].onload = function() { 
 
      loaded += 1 
 
      if (loaded >= frames.length) { 
 
       arrow() 
 
      } 
 
     } 
 
     images[i].src = frames[i] 
 
    } 
 
} 
 

 
function arrow(){ 
 
    let start = Date.now(); 
 
    let timer = setInterval(function() { 
 
    let timePassed = Date.now() - start; 
 
    if (timePassed >= 20000) { 
 
     clearInterval(timer) // finish the animation after 2 seconds 
 
     return; 
 
    } 
 
    move() 
 
    }, 200) 
 
} 
 

 
function move() { 
 
    var c = document.getElementById('continue') 
 
    c.innerHTML = '' // remove the content of #continue 
 
    
 
    // Insert the already exiting image from the images array 
 
    // into the container instead of downloading again with css 
 
    c.append(images[startframe]) 
 
    if (startframe >= frames.length - 1) { 
 
    startframe = 0 
 
    } 
 
    else { 
 
    startframe++ 
 
    } 
 
}

#continue { 
 
    width: 80px; 
 
    height:40px; 
 
} 
 

 
#continue > img { 
 
    max-width: 100%; 
 
}

<div onclick = "preloadImages()">Start</div> 
 

 
<div id="continue"></div>

Answer 2

Dies liegt daran, die Bilder geladen werden, wenn zum ersten Mal betrachtet werden müssen. Es ist möglich, Bilder auf verschiedene Arten vorzuladen. Here are three ways to preload images.