$(function () { function playAnimation() { var bg = $("#bg"), bgNum = 0; document.getElementById("audio").play(); const marvelInterval = setInterval(function () { bgNum = (bgNum % 20) + 1; bg.css( "background-image", `url(./resources/img-${bgNum}.jpg)` ); }, 100); setTimeout(function () { clearInterval(marvelInterval); }, 12000); } function initPlay() { $("#loader img").fadeOut(100); $("#a").html("▶PLAY ANIMATION (turn ON sound)").addClass("cursor"); $("#a").on("click", function () { $("#loader").fadeOut(100); playAnimation(); }); } $("#hidden").imagesLoaded({ background: true }, function () { setTimeout(function () { var audio = document.getElementById("audio"); audio.oncanplay = function () { initPlay(); }; if (audio.readyState > 3) { initPlay(); } }, 1000); }); });