Ładowanie zdjęć

Question

Cześć!

Mam pewien problem natury wizualnej:

Stworzyłam grę - memory. Po kliknięciu na kartę memory odkrywa się ona. 

Wszystko działa sprawnie oprócz małego niuansu - karta nagle znika (widać tło) i pojawia się. Po ponownym odkryciu tej samej karty, ładnie się odkrywa. Podobnie mam z muzyką - nie działa przy 1 grze, podczas 2 rozgrywki uruchamia się poprawnie.

Czy ktos wie jak to naprawić?

https://susanel92.github.io/harry-potter-memory-game/

Answer 1

Obrazki: Problem polega na tym, że tło ściągasz dopiero w momencie kliknięcia. Musisz pobrać grafiki odpowiednio wcześniej. Jest na to kilka sposobów -> https://stackoverflow.com/a/14390213/7218066 (btw, zmień rozszerzenie na .jpg i przepuść to wszystko przez jakiś https://tinypng.com/ - rozmiar plików zmniejszy się kilkukrotnie)

Muzyka: U mnie działa (Chrome 81, Win 10)

Answer 2

Niestety nie mam laptopa przy sobie aby sprawdzic ale z opisu wnioskuje, ze obrazki/assety pobieraja sie w trakcie gry. Powinien byc jakis preloader ktory znika gdy wszystkie obrazki/assety zostana pobrane. Podobnie pewnie jest z muzyka. Pobiera sie on w trakcie pierwszej rozgrywki i po odpaleniu drugiej zaczyna grac

Answer 3

Teraz sprawdziłem co do dźwięku. Problem polega na tym, że skrypt odpala muzykę przed interakcją użytkownika ze stroną i jest ona blokowana (Zaoszczędzenie transferu, zablokowanie muzyki w otwartych kartach etc), Zostało to wprowadzone nie dawno. 

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

main.js:32 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD