Ryzyko stałego ruchu podczas aktualizacji grafiki za pomocą JavaScript?

Question

Używam JavaScript, aby utworzyć podstawowy wyświetlacz zegara graficznego na stronie HTML. Ja aktualizację cyfrowe grafiki (każda cyfra aktualizowany tylko wtedy, gdy jest to konieczne) za pomocą standardowego mechanizmu DOM:

digitOne.src = "file/path/one.png"; 

Zegar działa dobrze, ale chcę wiedzieć, czy wszystkie lub niektóre przeglądarki będą bezmyślnie pobrać obraz z mojej strony za każdym razem, gdy atrybut src jest zmieniany, zamiast buforować kopię w pamięci RAM. Obawiam się, że w niektórych przypadkach, być może w starszych przeglądarkach, oglądanie zegara graficznego spowoduje ciągły ruch danych i przejedzie mój miesięczny limit danych.

Mam więc nadzieję, że ktoś może mi powiedzieć, czy to jest ryzyko, czy wskazać mechanizm wymiany grafiki w JavaScript, który gwarantuje, że istniejący obraz będzie używany z pamięci, a nie wyzwoli pobieranie sieci za każdym razem.

(Szukałem ostatecznej odpowiedzi na to pytanie, ale nie mogłem go znaleźć.Nie używam JavaScriptu dla DHTML od 1999/2000, więc jestem trochę za serio. dłużej trzeba napisać dwie wersje każdej funkcji JavaScript, jedną dla IE4/5 i jedną dla Netscape 4.)

Answer 1

Polecam przy użyciu rysunku 2D na płótnie HTML5. Nie wymaga żadnych obrazów i jest obecnie obsługiwany przez nowszą wersję wszystkich przeglądarek, nawet w IE. to sprawdzić

http://www.neilwallis.com/projects/html5/clock/index.php

Przeczytaj ten prosty, ale świetny poradnik:

http://diveintohtml5.info/canvas.html

Answer 2

Jeśli chcesz mieć absolutną pewność, możesz wygenerować element HTML z obrazem cyfry i umieścić go do strony z display: none, więc jest już załadowany i na stronie.

Jeśli cyfra jest potrzebna, najpierw sprawdź element HTML na stronie i wybierz ten, ustaw go na display: block lub cokolwiek potrzebujesz i zastąp bieżący element cyfry tym.

Jako przykładowy kod, właśnie to ułożyłem.

var digit_images = ["plik/ścieżka/jeden.png", "plik/ścieżka/dwa.png", "plik/ścieżka/trzy.png", ...];

function giveMeTheDigit(digit) 
{ 
    var img = digit_images[digit]; 
    var element = $("#digit_holder" + digit); 

    if (element.length == 1) 
    { 
     $(".digit_holder").hide(); //hide the current holder 
     element.show(); //show the new one 
    } 
    else 
    { 
     $('<div class="digit_holder" id="digit_holder' + digit + '"><img src="' + img + '" /></div>') 
      .appendTo("#yourDestination"); 
    } 
} 

Ten kod nie jest testowany, ale myślę, że wiesz, czego oczekuję i mogę go edytować zgodnie z Twoimi potrzebami. Powodzenia!

Answer 3

Jeśli CSS jest włączony, działa następujący wzór. Przedstawiam ten, ponieważ jest nieco jaśniejszy niż rozwiązanie, jeśli nie jest.

<div id='clock'> 
    <div id='digit0' style="display:block"><!-- ... --></div> 
    <div id='digit1' style="display:none"><!-- ... --></div> 
    <div id='digit2' style="display:none"><!-- ... --></div> 
    <!-- ... --> 
</div> 

Aby zmienić wyświetlanie cyfry, ukryj aktualnie widoczną cyfrę i wyświetl następną. Rozwiązanie tylko JavaScript jest powiązane. Utwórz pojedynczą niewidoczną <div>, aby ukryć niewidoczne cyfry. Dodaj i usuń poszczególne elementy, zamieniając starą cyfrę z wyświetlacza zegara na następną cyfrę z elementu przechowalni cyfr.

Oba te rozwiązania zachowują się tak, że obrazy w obrębie poddrzew DOM są pobierane tylko jeden raz, ponieważ poddrzewa nie są nigdy usuwane.

Answer 4

Nie musisz się martwić o ruch uliczny. Podczas inicjowania aplikacji można łatwo buforować obrazy. Zajrzyj do mojego przykładu w następującym JSFiddle: http://jsfiddle.net/pAwdC/. Podczas inicjowania aplikacji dzwonię pod numer loadImages. Ta metoda tworzy element DOM img dla każdej cyfry. To src pochodzi z tablicy imagesSrc.Gdy funkcja loadImages nazywa przeglądarka jest wykonanie kilku żądań HTTP GET do serwera:

Właściwie każdy wniosek został złożony, gdy:

current.src = imagesSrc[i]; 

jest wykonywany.

Po załadowaniu zdjęć, po prostu je ukrywam. Kiedy obrazy są z display: none lub visibility: hidden, użytkownik nie może ich zobaczyć, ale gdy te ukryte elementy są widoczne, nie są już tworzone żadne żądania, a jedynie końcowa wersja przeglądarki jest wykonywana tylko w trybie repaint, reflow/relayout, restyle. Wszystkie elementy są buforowane i wyświetlane tylko w razie potrzeby. Możesz sprawdzić swój firebug lub dowolne inne narzędzie deweloperskie, którego nie potrzebujesz więcej próśb o te obrazy.

Oto kod z moim przykładzie:

var images = [], 
    imagesSrc = ['https://lh3.ggpht.com/-107YXK-eAXs/UB6V49H9yuI/AAAAAAAACsY/69ceZJXaYZE/s1600/number-one-.png', 
    'https://lh3.ggpht.com/-8rOrxAwDl48/Txf99Sus18I/AAAAAAAAL1w/VcmeP7rNFwY/s1600/number2c.png', 
    'https://lh3.ggpht.com/-aGatHUidcGw/UG6Oh2HdWXI/AAAAAAAADQY/yc1CTC7cpOY/s1600/number3.png']; 

function loadImages() { 
    var current; 
    for (var i = 0; i < imagesSrc.length; i += 1) { 
     current = document.createElement('img'); 
     current.src = imagesSrc[i]; 
     images.push(current); 
     current.style.display = 'none'; 
     document.body.appendChild(current); 
    } 
} 

function showImage() { 
    var current = showImage.current || 0; 
    if (current >= 3) { 
     current = 0; 
    } 
    hideImages(); 
    images[current].style.display = 'block'; 
    current += 1; 
    showImage.current = current; 
    setTimeout(function() { 
     showImage(); 
    }, 1000); 
} 

function hideImages() { 
    for (var i = 0; i < images.length; i += 1) { 
     images[i].style.display = 'none'; 
    } 
} 

loadImages(); 
showImage(); 

Na moim przykładzie muszę tylko jedną instancję każdej cyfry. Oczywiście dla zegara można utworzyć cztery wystąpienia (cztery elementy DOM img DOM) dla każdej cyfry, aby można było wyświetlać duplikaty.

Dla twojej aplikacji lepszym rozwiązaniem będzie załadowanie obrazów na żądanie, ale tylko raz, a następnie ich buforowanie. Dobrze jest to zrobić, ponieważ użytkownik nie może pozostać na Twojej stronie, aby zobaczyć każdą cyfrę (od 0 do 9), a możesz nieco poprawić swoją wydajność dzięki temu leniwemu ładowaniu. W tej strategii możesz sprawdzić flyweight pattern. Jego główną ideą jest zarządzanie zestawem małych obiektów wielokrotnego użytku i używanie ich na żądanie, jednocześnie kontrolując jego tworzenie. Tutaj jest klasa diagram UML, który przedstawia strukturę wzoru:

Istnieją różne warianty podejścia wspominałem. Może być najlżejszą odmianą, jaką możesz zrobić, to użyć pojedynczego obrazu zawierającego wszystkie cyfry. Następnie możesz tworzyć różne elementy (na przykład div) o wielkości cyfry. Po ustawieniu tych elementów tło o określonej pozycji można utworzyć wszystkie cyfry, ładując tylko jeden obraz. Spowoduje to zmniejszenie liczby próśb z 10 do jednej. Takie podejście jest skutecznie wykorzystywane na przykład przez Facebook.

Jeśli potrzebujesz dalszej pomocy, chętnie pomogę.