Forum PHP.pl > [JavaScript] Preloader

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Preloader - proszę o pomoc

xavi_sof

22.06.2014, 21:20:25

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

timon27

22.06.2014, 21:43:15

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

xavi_sof

22.06.2014, 21:51:37

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?

markuz

23.06.2014, 08:55:13

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

xavi_sof

23.06.2014, 10:09:37

Cytat(markuz @ 23.06.2014, 09:55:13 )

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

markuz

23.06.2014, 10:25:56

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.