javascript crossbrowser nowe zdjęcie()

Question

Co jest nie tak z tą funkcją? To działa w Operze i Firefoksie, ale prace nad doens't Safari pod Windows

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {}; 
} 

gdy próbuję GetImage ('http://site.com/someservlet.gif') Ten obraz nie jest ładowany (bo someservlet.gif rejestruje wszystkie kupna) It działa w przeglądarce Opera i Firefox, ale nie w Safari. Próbowałem "new Image()" i "document.createElement ('img')" - ten sam wynik.

========== UPDATE: Funkcja działa dobrze, gdy jest wywoływany bezpośrednio problemów rozpocząć, gdy jest wywoływana z detektora zdarzeń

<a href="http://google.com/" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a> 

<a href="#" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a> 

<script type="text/javascript"> 
function getImage(url) { 
    var image = document.createElement('img'); 
    alert('1'); 
    image.onload = function() {alert(image.src);}; 
    image.src = url; 
    alert('2'); 
} 
</script> 

„lokalny” link działa dobrze w Firefox, Opera i Safari (ale Safari pokazuje alert1, alert2, a następnie alarm z "src" z jakiegoś powodu, podczas gdy inne przeglądarki wyświetlają alert1, alertSrc, alert2)

"google" link Opera, Firefox - działa dobrze (alert1, alertSrc, alert2), ale Safari nie - wyświetla alertSrc. W Safari widzisz alert1, alert2 i to wszystko. Serwlet "/pic/img.gif" nie otrzymuje żądania, gdy ktoś kliknie link "google" z Safari.

Na czym polega problem, jak go rozwiązać?

Dzięki.

Answer 1

Moje pierwsze wrażenie jest takie, że natknął się na jakiegoś kodu optymalizacja przeglądarek, które odracza ładowanie obrazów, które nie są wyświetlane. Do tej pory:

Safari 4.0.2 (530.19.1):

• działa na mnie, jak opisano (zarówno lokalnych, google, a kiedy zmienił zdarzenie mouseover)
• kolejność alarmy jest alert1, alertsrc, alert2

Firefox Nightly (3.5.3pre, 20090805):

• działa zgodnie z opisem. Zabawne, ponieważ początkowo nie działało. Spróbuj załadować obraz do pamięci podręcznej, sprawdź, czy ma to wpływ na test.
• Kolejność wpisów jest alert1, a następnie alertsrc i alert2 w tym samym czasie (przesunąć okno, aby zobaczyć oba)

Google Chrome (2.0.172.39):

• prace jak w Safari, chociaż wydaje się po najechaniu myszką na ogień zbyt wiele imprez
• Kolejność wpisów jest alert1, alert2, alertsrc

Internet Explorer (7.0.6001.18000)

• prace jak opisano (zarówno lokalnych, google, a kiedy zmienia się mouseover)
• Kolejność wpisów jest alert1, alertsrc, alert2

Należy pamiętać, że zmieniłem lokalizację obrazu na http://www.google.com.ar/images/nav_logo6.png, ponieważ nie mam teraz uruchomionego skryptu obrazu losowego. Na tej podstawie sugerowałbym wykonanie testu samemu z różnymi obrazami i próbując nieistniejących obrazów, obrazów w pamięci podręcznej, obrazów nie znajdujących się w pamięci podręcznej.

Powód, dla którego alerty niekoniecznie są w porządku, polega na tym, że różne przeglądarki ładują obrazy w różnych zamówieniach, a alertsrc ma miejsce tylko po załadowaniu obrazu. Sprawdzanie, czy obraz jest załadowany, czy nie jest, jeśli szerokość wynosi 0.

Answer 2

spróbuj tego przykładu w IE i Safary, i działa idealnie.

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {alert('ok');}; 
} 
getImage("http://www.google.com.ar/images/nav_logo6.png"); 

Answer 3

Jedynym sposobem nie mogłaby zmusić go do pracy w IE było wykorzystanie nowy obraz() zamiast document.createElement. To było naprawić przesuwając image.src aby po swojej funkcji onload:

image.onload = function() {} 
image.src = url; 

Answer 4

Myślę, że to problem z pamięcią podręczną.
Kiedy mówisz, że image.src = url; javascript natychmiast przechodzi do pobierania obrazu, a jeśli obraz jest zapisany w pamięci podręcznej, to przeglądarka po prostu użyje buforowanej pamięci i uruchomi ładowanie, a teraz mówisz image.onload = function() {};, ale onload został już uruchomiony, więc function() nigdy nie jest nazywa.

W każdym razie to tylko moje spekulacje, nie jestem pewien, czy mam rację. Jeśli jednak mam rację, powinieneś być w stanie to naprawić, przesuwając image.src = url; pod image.onload = function() {};