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

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

<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);

fonte

2013-10-16 tdelboni

Quali sono i requisiti per quando l'utente riceve un'immagine a bassa o ad alta risoluzione? Puoi utilizzare le query multimediali CSS e un'immagine di sfondo anziché un vero tag 'img'? – CodingIntrigue

Hai intenzione di cambiare tutte le risorse esterne sulla pagina, o solo alcune. Se è tutto, potresti essere in grado di fare qualcosa con l'elemento https://developer.mozilla.org/fr/docs/Web/HTML/Element/base (se controlli il numero della tua pagina) – Xavier

@RGraham: 1. nessun requisito, ho solo bisogno di sostituire e immagine obsoleta e deprecata, e non ho accesso back-end per cambiarlo sul lato server, a una nuova versione con risoluzione più alta (non so se ho capito bene il tuo domanda). 2. Penso che le query multimediali non saranno utili. 3. Il '' nel frammento di codice, con l'immagine lowres, viene generato dal backend e non ho alcun controllo su di esso. Tuttavia, posso usare background-image per visualizzare la versione highres. – tdelboni

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.

fonte

2013-10-16 12:21:07

Sfortunatamente, non ho accesso al lato back-end/server. – tdelboni

@tdelboni Quindi non c'è alcuna opzione per farlo. L'immagine a bassa risoluzione è già stata scaricata quando lo script sta avviando l'esecuzione. –

Bene, a male ... Comunque, grazie per l'aiuto! – tdelboni

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/[email protected]');

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/

fonte

2013-10-16 14:30:31 Seagrass

Come non conoscere il nome del file in anticipo, dovrei comunque scaricarlo dall'elemento ' ... – tdelboni

Ah, molto vero. Spero che tu trovi una soluzione a questo! – Seagrass

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

fonte

2015-07-03 15:18:58 cmlndz

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

risposta

Problemi correlati