JavaScript: come cambiare sorgente di immagini senza l'emissione di due richieste HTTP

Question

Ecco il codice:

<div id="wrapper"> 
    <img src="lowres/image123.jpg"> 
</div> 

premesse: L'elemento <img> è generato da un backend sistema proprietario e utilizza un'immagine a bassa risoluzione come sorgente. Posso solo operare su di esso utilizzando puro javascript (senza jquery!).

ho bisogno di cambiamento de src attributo per una versione ad alta risoluzione si trova in un server esterno, ad es .: src="//cdn.provider.com/highres/image123.png" (immagini hanno lo stesso nome ma luoghi diversi).

IL PROBLEMA: farlo dopo <img> inserimento nel DOM emette 2 (due) le richieste HTTP, uno per l'immagine a bassa risoluzione e altro per le highres - e ho un sacco delle immagini sulla pagina!

Per FIX IT, mi chiedevo se è possibile manipolare <img> appena prima del suo inserimento in DOM per cambiare src appropriato, ad esempio da intercettare un evento <img>"beforeInsertion" o un evento " afterInsertion " dello <div> che lo avvolge.

Cheers!

UPDATE 1: per chiarire le cose: 1) Non ho accesso al lato back-end/server; 2) Non voglio visualizzare l'immagine a bassa risoluzione, solo l'alta risoluzione; 3) Non conosco il nome del file in anticipo, ho bisogno di ottenerlo dallo <img> e aggiungerlo al percorso della versione ad alta risoluzione memorizzata nel CDN (entrambe le immagini hanno lo stesso nome); e 4) Posso farlo con il codice sotto, ma al costo di TWO richieste HTTP, che è quello che voglio evitare e che cosa ha motivato questa domanda! ;)

var img = document.getElementById("wrapper").childNodes[0]; 
img.src = getHighResolutionImagePath(img.src); 

Answer 1

Devi cambiare url prima di aggiungere <img> tag del documento (per esempio nello script lato server). Il browser riceverà l'immagine dall'url dato non appena riceverà il tag, quindi non è possibile sostituirlo. Soprattutto che js verrà eseguito dopo aver ottenuto tutti gli elementi utilizzati sul sito web.

Answer 2

Quando stai sviluppando un app per i display retina e si desidera lasciare il browser so che è un immagine ad alta risoluzione, si potrebbe aggiungere "@ 2x" per il nome dell'immagine, in questo modo:

sfondo -image: url ('../ img/logo2@2x.png');

Provalo e verifica se il browser adotta la stessa politica.

Fonte: http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Answer 3

Devi ascoltare eventi di mutazione, in particolare DOMNodeInserted

La documentazione completa è disponibile all'indirizzo MDN > Mutation Events

Una volta che avete rilevato che un'immagine come state aggiunte (si deve filtrare il corretto tipo di immagine) è possibile sostituire la sorgente per quella che si desidera.

Un piccolo frammento tratto da MDN:

element.addEventListener("DOMNodeInserted", function (ev) { 
// ... 
}, false); 

Attenzione che le prestazioni saranno notevolmente degradata