Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] Preloader - proszę o pomoc, [JavaScript] Preloader - proszę o pomoc
-xavi_sof-
post
Post #1





Goście
Witam,

Kod
$(document).ready(function(){

    //Preloader images

    var preloadImages = ['../img/1.jpg',
                         '../img/2.jpg',
                         '../img/3.jpg'];

    var imgs = [];
    for(var i=0; i<preloadImages.length; i++){
        imgs[i] = new Image();
        imgs[i].src = preloadImages[i];
    }



});


Mam pytanie odnośnie preloadera. Dlaczego przeglądarka nie pobiera tych 3 obrazków po wejściu na strone? Po prostu uruchamia się strona i pasek ładowania wskazuje od razu 100% pobrania... Czy przeglądarka nie powinna stworzyć nowych obiektów "Image" i pobrać te obrazki aby być gotowa to wyświetlenia w razie potrzeby?

Proszę o wyjaśnienie
Go to the top of the page
+Quote Post
timon27
post
Post #2





Grupa: Zarejestrowani
Postów: 578
Pomógł: 69
Dołączył: 15.04.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Niekoniecznie.
Kod wykonuje się o wiele szybciej niż wczytują obrazki.
Jeśli chcesz aby wczytały się wszystkie skorzystaj z onload

Ten post edytował timon27 22.06.2014, 21:43:43
Go to the top of the page
+Quote Post
-xavi_sof-
post
Post #3





Goście
Cytat(timon27 @ 22.06.2014, 22:43:15 ) *
Niekoniecznie.
Kod wykonuje się o wiele szybciej niż wczytują obrazki.
Jeśli chcesz aby wczytały się wszystkie skorzystaj z onload


Czyli w książce jest błąd?

"Aby uniknąć opóźnienia, można wstepnie pobrać wszystkie rysunki wyświetlane w odpowiedzi na zdarzenia. Na przykład kiedy użytkownik umieści kursor myszy nad przyckiskiem w pasku nawigacyjnym, efekt zastępowania powinien działać błyskawicznie. Wstępne pobieranie (preloader) oznacza nakazanie przeglądarce wczytania obrazka zanim skrypt będzie chciał go wyświetlić. Pobrany plik zostanie zapisany w pamięci podręcznej przeglądarki"

"Wstępne wczytywanie wymaga utworzenia nowego obiektu rysunku i ustawienia jego właściwości src"

Kod
var newPhoto = new Image();
newPhoto.src = 'img/1.jpg';


Nie rozumiem więc. Książka - błąd, powinienem użyć onLoad() po prostu?
Go to the top of the page
+Quote Post
markuz
post
Post #4





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
----- 

[JAVASCRIPT] pobierz, plaintext 
  1. var image = new Image(); // Wstępne wczytywanie
  2. image.src = 'img/1.jpg'; // Wstępne wczytywanie
  3. image.onload = function() { // Właściwe wczytanie obrazka
  4.      // teraz zwiększasz postęp paska i wczytujesz następne zdjęcie.
  5.      // użyj do tego rekurencji
  6.      // do obrazka się możesz odnieść za pomocą this 
  7.      console.log(this);
  8. }
[JAVASCRIPT] pobierz, plaintext


Ten post edytował markuz 23.06.2014, 09:02:49
Go to the top of the page
+Quote Post
-xavi_sof-
post
Post #5





Goście
Cytat(markuz @ 23.06.2014, 09:55:13 ) *
[JAVASCRIPT] pobierz, plaintext 
  1. var image = new Image(); // Wstępne wczytywanie
  2. image.src = 'img/1.jpg'; // Wstępne wczytywanie
  3. image.onload = function() { // Właściwe wczytanie obrazka
  4.      // teraz zwiększasz postęp paska i wczytujesz następne zdjęcie.
  5.      // użyj do tego rekurencji
  6.      // do obrazka się możesz odnieść za pomocą this 
  7.      console.log(this);
  8. }
[JAVASCRIPT] pobierz, plaintext



Dziękuje,

czym się różni "Wstępne wczytywanie" od .onLoad ? new image() to tylko informacja dla przeglądarki że będzie miała doczynienia z obrazkiem, to wszystko? To coś takiego jak <!doctype html> w html ?
Go to the top of the page
+Quote Post
markuz
post
Post #6





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
-----

1. onLoad !== onload
2. "Wstępne wczytywanie" (Nie wiem czy to tak się nazywa) to tak jakbyś w html napisał <img src="img/1.jpg"> dopiero funkcja onload wyłapuje czy obrazek się wczytał.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 21:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn