• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
+1 głos
678 wizyt
pytanie zadane 2 marca 2021 w JavaScript przez Krzysiek_34 Mądrala (6,350 p.)
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ć.

2 odpowiedzi

+1 głos
odpowiedź 2 marca 2021 przez Comandeer Guru (606,550 p.)
A jaki problem jest powodowany przez liczbę linii kodu? Bo ostatecznie do użytkownika i tak powinien być wysłany zminifikowany kod.
komentarz 2 marca 2021 przez Krzysiek_34 Mądrala (6,350 p.)

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.smiley

Będę bardzo wdzięczny.

komentarz 2 marca 2021 przez Comandeer Guru (606,550 p.)

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? 

komentarz 2 marca 2021 przez Krzysiek_34 Mądrala (6,350 p.)
edycja 3 marca 2021 przez Krzysiek_34

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.frown

komentarz 2 marca 2021 przez Comandeer Guru (606,550 p.)
Hm, a sprawdzałeś czy to nie przypadek problem z dużym rozmiarem samych obrazków?
komentarz 3 marca 2021 przez Krzysiek_34 Mądrala (6,350 p.)

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 ?

0 głosów
odpowiedź 2 marca 2021 przez ScriptyChris Mędrzec (190,190 p.)

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.

Podobne pytania

+1 głos
2 odpowiedzi 306 wizyt
+1 głos
3 odpowiedzi 1,090 wizyt
pytanie zadane 15 stycznia 2021 w C i C++ przez rain.deer Początkujący (430 p.)
+1 głos
1 odpowiedź 748 wizyt
pytanie zadane 7 kwietnia 2021 w C i C++ przez Mavimix Dyskutant (8,420 p.)

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,667 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...