Za dużo kodu JavaScript do działania pokazu slajdów. Czy da się skrócić ten kod JS ?

Question

Witam.

Mam taki pokaz slajdów:

https://codepen.io/Krzysiek_39/pen/poNLbgx

Zauważcie, że do działania tego pokazu slajdów jest zapisane aż ok 300 linijek w kodzie JavaScript.

Czy da się skrócić ten kod JS, aby działanie tego pokazu slajdów było tak samo identyczne ?

Byłoby dobrze to skrócić.

Answer 1

A jaki problem jest powodowany przez liczbę linii kodu? Bo ostatecznie do użytkownika i tak powinien być wysłany zminifikowany kod.

Comments

Chodziło mi o to, że im więcej kodu, tym przeglądarka to wszystko dłużej wczytuje. Ten pokaz slajdów składa sie tylko z kilku efektów:

1. Co kilka sekund jest efekt przesunięcia obrazka i pokazania kolejnego obrazka

2. Pod koniec tego efektu jest spowolnione tempo przesuwania każdego obrazka

3. Obrazki przesuwają sie po kolei ---> 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4,... (efekt trwający w nieskończoność)

4. Można od razu przejść z obrazka nr 2 do nr 5, z obrazka nr 4 do nr 1, z obrazka nr 3 do nr 6 itd itd - klikając na dole w odpowiednią kropkę (wszystkie dostępne warianty działają)

5. Można od razu przejść bez czekania do poprzedniego (previous) obrazka albo następnego (next) obrazka - klikając na okrągły przycisk

Tam już więcej efektów nie ma, a w kodzie JS zapisane jest aż ok 300 linijek.

Byłoby super, gdybyście potrafili ten kod JS skrócić kilkakrotnie.

Będę bardzo wdzięczny.

---

Chodziło mi o to, że im więcej kodu, tym przeglądarka to wszystko dłużej wczytuje.

 ostatecznie do użytkownika i tak powinien być wysłany zminifikowany kod

Pytanie, jak długo się faktycznie ten kod wczytuje. Robiłeś benchmarki? 

---

Nie robiłem żadnego testu.

Gdy uruchamiam stronę główną łącznie z tym pokazem slajdów (przez Notepad++ lub Visual Studio Code), to dopiero po upływie trzech sekund - pokazuje sie pierwszy obrazek.

Podejrzewam, że jeżeli skróciłoby sie tego JS chociażby o połowę, to pierwszy obrazek pokazałby sie 2x szybciej i  byłoby lepiej.

To tylko moja sugestia.

Być może sie mylę, nie wiem.

---

Hm, a sprawdzałeś czy to nie przypadek problem z dużym rozmiarem samych obrazków?

---

Całkiem możliwe, że problemem może być duży rozmiar obrazków. Z tymże te linki do obrazków są tylko testowe, bo ja tam umieszczę swoje obrazki (raczej o rozmiarze poniżej 1600x900).

Zamiast:

<a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>

wpiszę:

<img src="images/foto1.jpg" alt=""><span class="caption">Jakiś tam napis dla slide 1</span>

W tym testowym kodzie HTML - obrazki mają podany (teoretycznie) rozmiar 1600x900.

Ja mogę umieścić jakiś fajny obrazek o rozmiarze powiedzmy 800x600.

Czyli w przypadku tego całego kodu - skalowanie obrazka (o rozmiarze powiedzmy 800x600) bedzie powodowało jego utratę jakości ?

I to bedzie MINUS.

Natomiast PLUS bedzie taki, że obrazek o rozmiarze powiedzmy 800x600 bedzie sie szybciej wczytywał niż ten testowy o rozmiarze 1600x900 ?

Answer 2

Analizując kod, z grubsza w oczy rzuca się zbyt rzadkie korzystanie z chainowania w jQuery i powtarzanie bloków kodu zamiast użycia sparametryzowanych funkcji.