jQuery zmieniając <img> src z $ (selektor) .prop zajmuje dużo czasu

Question

Nie ma problemu z samą funkcjonalnością tego kodu. Mam coś takiego:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 

mam kolejną część mojego kodu, który zmienia obraz src/tekst z jQuery.

function changeImage() { 
    $('#imageToChange').prop('src', '/path/image2.png'); 
    $('#textToChange').html('New Text'); 
} 

Jak można się spodziewać, działa to dokładnie tak, jak tego oczekuję. Ale z 1 dziwactwem.

We wszystkich głównych przeglądarkach (chrome/FF/IE). Zmiana obrazu zajmuje dużo czasu.

Na przykład, gdy zadzwonię do changeImage(), tekst zmieni się natychmiast, ale obraz może się nie zmienić do 1-2 sekundy później. (Nie duże obrazy w dowolnym odcinku, około ~ 6 KB i lokalne)

Nie znalazłem nikogo, kto naprawdę narzekałby na to, ale zastanawiam się, czy istnieje jakikolwiek sposób na przyspieszenie zmiany obrazu src? Być może lepszy sposób to zrobić?

To jest również jquery 1.8.0.

Dzięki

Answer 1

przed Widziałem to zachowanie. Opóźnienie jest spowodowane tym, że obraz nie jest buforowany, a czas ładowania jest późniejszy. Jedyne znane mi rozwiązania:

1. Wstępnie załaduj obrazy za pomocą obiektów obrazów JavaScript.
2. Należy obsłużyć obraz load event i zaktualizować tekst po załadowaniu obrazu. Uwaga jQuery przedstawia niektóre problemy, aby zwrócić uwagę na:

Ostrzeżenia imprezy obciążenia w przypadku korzystania z obrazów

Częstym wyzwaniem deweloperzy próbują rozwiązać używając .load() skrót jest do wykonania działa, gdy obraz (lub zbiór obrazów ) został całkowicie załadowany.Istnieje kilka znanych zastrzeżeń z , które należy odnotować. Są to:

• To nie działa konsekwentnie ani wiarygodnie cross-browser
• To nie uruchamia poprawnie w WebKit jeśli src obrazu jest ustawiony na tym samym src jak przed
• to nie prawidłowo bańka górę drzewa DOM
• może przestać strzelać do obrazów, które już mieszkają w pamięci podręcznej przeglądarki

http://api.jquery.com/load-event/

Answer 2

prawdopodobnie jest to czas ładowania zdjęć. jeśli tak jest, ładowanie obrazu po raz pierwszy powinno być jedynym wolnym. Kolejne ładowanie, po zmianie obrazu na coś innego, byłoby szybkie.

Jako rozwiązanie możesz spróbować załadować swoje obrazy. Lub, jeszcze lepiej, użyj css sprites.

Answer 3

po zmianie src obrazu, który zostanie pobrany z innego pliku obrazu. tworzy żądanie HTTP dla nowego obrazu, więc musi się wczytać przed jego wyświetleniem. czy to może być to?

btw, z tego powodu możesz wstępnie załadować obraz za pomocą polecenia js. albo dodać

<img src="path/to/image.jpg" style="display: none" /> 

do kodu HTML lub za pomocą JS

var im = new Image(1,1); 
im.src = "path/to/image.jpg"; 

ten sposób obraz będzie buforowane

Answer 4

To opóźnienie sieci. Wypróbuj to:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 
<img src='/path/image2.png' style='display:none'> 

Answer 5

Możesz wstępnie załadować obraz za pomocą obiektu JavaScript Image.

W nagłówku dokumentu umieścić

<script type="text/javascript"> 
    img2 = new Image(); 
    img2.src = "/path/image2.png"; 
</script> 

Answer 6

Możesz spróbować zmieniając atrybut przy użyciu jquery .attr funkcję. Jeśli dobrze pamiętam, znacznik src obrazu jest atrybutem, a nie właściwością. Chociaż zarówno .prop jak i .attr wykonują względnie tę samą funkcję, aby zapewnić spójne zachowanie między przeglądarkami, możesz zamiast tego użyć znacznika .attr.

$('#imageToChange').attr('src', '/path/image2.png'); 

Jeśli chodzi o opóźnienie, może to być spowodowane rozmiarem obrazu. Przeglądarka musi wysłać do serwera żądanie GET, a następnie pomalować DOM. Jeśli obraz jest duży, może to spowodować upływ czasu między momentem, w którym kod zmienia źródło i kiedy nowy obraz jest prawidłowo zapisany w DOM. Jeśli obraz jest duży, warto rozważyć jego skalowanie lub optymalizację pod kątem korzystania z Internetu.

Mam nadzieję, że to pomoże.