Modifica di un attributo src dell'immagine con jQuery non sempre applicato in Chrome/Opera

Question

Ho il seguente bit di codice che viene utilizzato per recuperare una piccola parte ad alta risoluzione di una foto sul mio sito web. L'idea è di permettere alle persone di avere uno sguardo alla qualità dell'originale prima di decidere se acquistare o meno:

$('#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...'); 
}); 

Per qualche ragione, è intermittente. Fiddler mostra che lo snippet viene sempre caricato, ma a volte viene visualizzato solo. Anche se non viene visualizzato, il codice nell'evento load() viene eseguito correttamente.

Quindi, supponendo che sia caricato, Fiddler mostra che è caricato, ma circa il 50% del tempo in cui non viene effettivamente visualizzato dove dovrebbe.

Tende ad essere meno sul mio desktop a casa, e più sul mio portatile quando sono in giro, quindi mi chiedo se è in qualche modo correlato alla risorsa essendo un caricamento un po 'lento, a volte ...?

Qualche idea?

edit: questo in realtà sembra limitato a Chrome & Opera, funziona benissimo in Firefox/IE11

Answer 1

Sembra che il problema è ben documentato come è evidente dai seguenti posti:

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)

Vorrei suggerire che si carica una nuova immagine nella memoria, poi, quando generato l'evento carico di questa nuova immagine, modificare lo src dell'immagine reale e fare qualsiasi altra cosa deve essere fatto. L'immagine originale rimane intatto e altri eventi (diversi carico) collegato ad esso deve rimanere intatto:

$(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

Usa .load() per caricare l'immagine:

$('#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

È possibile utilizzare Immagine onload evento.

Questo gestore di eventi verrà chiamato sull'elemento immagine al termine del caricamento dell'immagine.

Codice

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

a cura di mostrare che questo non funziona ...

sembrava in un primo momento che una "soluzione" pragmatica è stato quello di rimuovere e ri- aggiungi l'immagine:

In questo modo:

$('#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...'); 
}); 

Questo sembrava funzionare in tutti i browser in un primo momento, ma sembra essere altrettanto intermittente ora ...

Answer 5

Il problema potrebbe essere legato alla politica di caching delle risorse del client, che dipende dal browser e la sua impostazioni. In tal caso, puoi forzare il caricamento dell'immagine aggiungendo un numero casuale come parametro alla stringa dell'indirizzo. Dal punto di vista del server, questo parametro non ha senso, ma per il browser lo vede come una risorsa completamente nuova, anche se in realtà è la stessa cosa.Sotto esempio illustra questo metodo:

$('#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

cercare di mettere de "nome" proprietà nel tag con lo stesso valore come la proprietà "id".

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

in questo modo jquery anche in cromo rileva l'atribute e cambiare in modo corretto, nel olders Versioni di jquery Ignoro se questo funziona, spero che questo aiuto