Zmiana atrybutu src obrazu za pomocą jQuery nie zawsze jest stosowana w przeglądarce Chrome/Opera

Question

Mam następujący fragment kodu, który służy do pobrania małej części zdjęcia o wysokiej rozdzielczości na mojej stronie internetowej. Ideą jest, aby ludzie mają wgląd w jakości oryginalnej przed podjęciem decyzji o zakupie, czy nie:

$('#magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() { 
    window.clearInterval(maginterval); 
    magtimer=3; 
    maginterval=window.setInterval(magViewCountdown,1000); 
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); 
}); 

Z jakiegoś powodu, to jest przerywany. Fiddler pokazuje, że fragment jest zawsze wczytywany, ale jest wyświetlany tylko czasami. Nawet jeśli nie wyświetla się, kod w zdarzeniu load() działa dobrze.

Uważa, że ​​jest załadowany, Fiddler pokazuje, że jest załadowany, ale około 50% czasu nie wyświetla, gdzie powinien.

To zdarza się mniej na moim biurku w domu, a więcej na moim laptopie, gdy jestem poza domem, więc zastanawiam się, czy jest to w jakiś sposób związane z zasobem będącym nieco powolnym ładowaniem czasami ...?

Wszelkie pomysły?

edit: to rzeczywiście wydaje się ograniczony do Chrome & Opery, to działa dobrze w Firefox/IE11

Answer 1

wygląda problemu jest dobrze udokumentowane, jak to wynika z następujących stanowisk:

1. jquery callback on image load when changing the src

2. Capturing load event for images dynamically changing their source

3. jQuery callback on image load (even when the image is cached)

Proponuję załadować nowy obraz w pamięci, a następnie, gdy Zdarzenie ładunek ten nowy obraz, należy zmienić src rzeczywistego obrazu i robić, co jeszcze trzeba zrobić. Oryginalne zdjęcie pozostaje nienaruszona i wszelkie inne imprezy (inne niż obciążenia) załączone do niej powinny pozostać nienaruszone:

$(new Image()).attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x=' + left + '&y=' + top).load(function() { 
    $('#magviewplus').attr('src', this.src); 
    window.clearInterval(maginterval); 
    magtimer = 3; 
    maginterval = window.setInterval(magViewCountdown,1000); 
    $('#clicktoenhance').html('Exiting in ' + magtimer + 's...'); 
}); 

DEMO

Answer 2

Zastosowanie .load(), aby załadować obraz:

$('#magviewplus').load('/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top, function() { 
    window.clearInterval(maginterval); 
    magtimer=3; 
    maginterval=window.setInterval(magViewCountdown,1000); 
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); 
}); 

Answer 3

Można użyć obrazu onload wydarzenie.

Ta procedura obsługi zdarzenia zostanie wywołana na elemencie obrazu po zakończeniu ładowania obrazu.

Kod

var url = '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top; 

var img = new Image(); 

img.onload = function() { 
    //When load's sucessfully 
    $('#magviewplus').prop('src', url); 

    window.clearInterval(maginterval); 
    magtimer=3; 
    maginterval=window.setInterval(magViewCountdown,1000); 
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); 
}; 

img.onerror = function() { 
    //When load's fails 
}; 

img.src = url; //Set URL 

Answer 4

edytowane aby pokazać, że to nie działa ...

Wydawało się początkowo, że pragmatyczne "rozwiązanie" było usunięcie i ponowne dodaj zdjęcie:

<div id="magviewholder"><img id="magviewplus" src="pixel.gif" alt=""></div> 

Tak jak poniżej:

$('#magviewholder').children("img").remove() 
$('#magviewholder').append('<img>'); 

$('#magviewholder>img').attr('onerror','imgError(this)').attr('id','magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() { 
    window.clearInterval(maginterval); 
    magtimer=3; 
    maginterval=window.setInterval(magViewCountdown,1000); 
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...'); 
}); 

To wydaje się działać we wszystkich przeglądarkach w pierwszym, ale wydaje się być tak samo przerywany teraz ...

Answer 5

Problem może być związany z polityką buforowania zasobów klienta, który zależy od przeglądarki i jej ustawienia. Jeśli tak, możesz wymusić przeładowanie obrazu, dołączając losową liczbę jako parametr do ciągu adresu. Z punktu widzenia serwera parametr ten nie ma znaczenia, ale dla przeglądarki jest to zupełnie nowy zasób, nawet w rzeczywistości jest taki sam.Poniżej próbka ilustruje tę metodę:

$('#loadbtn').click(function(){ 
 
    $('#msg').html("loading..."); 
 
    $('#myimg').attr("src", "http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1" + 
 
    "&rnd=" + Math.random()); 
 
}); 
 

 
$('#myimg').load(function(){ 
 
    $('#msg').html("loaded"); 
 
});

#loadbtn { 
 
    margin: 16px; 
 
} 
 
#msg { 
 
    margin: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id='myimg' src='http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1' /> 
 
<div> 
 
    <input type=button id='loadbtn' value='reload' /> 
 
</div> 
 
<div id='msg'>loading...</div>

Answer 6

spróbować umieścić de „nazwa” własność w znaczniku o tej samej wartości, podobne właściwość "id".

<id="magviewplus" name="magviewplus".../> 

w ten sposób jQuery nawet w Chrome wykryje atribute i zmienić poprawnie, w Olders wersja jQuery zignorować jeśli to działa, nadzieję, że to pomaga