Mise en cache dynamiquement les images chargées

J'utilise javascript pour charger dynamiquement une d'une série d'images en une seule balise img, basée sur l'interaction de l'utilisateur:Mise en cache dynamiquement les images chargées

function reassignImage(newSource) 
{ 
    img.src = newSource; 
}

Cela fonctionne très bien, sauf que je quand je l'inspecter avec les outils de développement Chrome, Je vois que même si je recharge une image que j'ai déjà chargée, elle fait un autre appel HTTP ET agrandit le graphique de la taille totale des images.

Cela semble être le pire des deux mondes. Je voudrais soit:

Pour charger à partir du cache si l'image étaient le même.
Pour recharger chaque image à chaque fois, mais ne développez pas le cache .

Comment pourrais-je réaliser l'un ou l'autre scénario?

Merci! Yarin

Source

2010-09-14 Yarin

Cela va précharger une image afin que le navigateur puisse l'afficher immédiatement lorsque vous définissez réellement le src d'un tag img. Je spécule que le pré-chargement d'une image comme celle-ci assurera qu'il est dans le cache, donc il ne sera pas rechargé, bien que je ne l'ai pas testé.

var myImg = new Image(25, 25); 
myImg.src = "/foobar.png";

En d'autres termes, il faut maintenant que je l'espère télécharger deux images

function reassignImage(newSource) { 
    var myImg = new Image(25, 25); 
    myImg.src = newSource; 
    img.src = newSource; 
} 

reassignImage("first.png"); 
reassignImage("second.png"); 
reassignImage("first.png");

Modifier

que je faisais fausse route. Essayez de créer un new Image() pour chaque nouveau fichier chargé par l'utilisateur. Échange ces éléments d'image dans et hors de la dom. Dans quoi l'en-tête de contrôle de cache est-il défini dans la réponse http pour l'image?

<html> 
    <head> 
    <script> 
    var imageElements = {}; 
    function reassignImage(newSource) { 
     if (typeof imageElements[newSource] == "undefined") { 
     imageElements[newSource] = new Image(); 
     imageElements[newSource].src = newSource; 
     } 
     var container = document.getElementById("imageContainer"); 
     container.innerHTML = ''; 
     container.appendChild(imageElements[newSource]); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="imageContainer"></div> 
    </body> 
</html>

Source

2010-09-14 19:44:47

@ Dave- pas bien sûr que je suis. Voulez-vous dire qu'en créant dynamiquement la balise Image, cela affecte la mise en cache des images? Et la deuxième partie de votre exemple n'est pas claire: pourquoi affectez-vous la nouvelle source à deux composants diff img? – Yarin

@Yarin 'new Image' ne crée pas d'image _tag_ il crée une image _object_. C'est la manière approuvée par les parties de pré-charger des images. Je suppose que l'utilisation de ces objets d'image affectera la façon dont les fichiers d'image sont mis en cache, oui. 'myImg.src = newSource' assigne le' src' d'un objet _ image tandis que 'img.src = newSource' assigne le' src' de votre image _tag_. –

@ Dave- OK Intéressant je n'avais pas réalisé le concept d'objets Image. Cependant, toujours confus par l'exemple - que faisons-nous avec l'objet Image que vous avez créé - ne devrions-nous pas l'assigner à img.src? – Yarin

(Les outils de développement Chrome vous montreront). S'il n'est pas configuré pour être mis en cache, il sera récupéré.

Source

2010-09-14 19:52:47 Nik

bon point ici - donc une question de suivi est de savoir comment contrôler les en-têtes de contrôle de cache de quelque chose comme Amazon Cloudfront ou d'autres CDN? – Yarin

Vous ne savez pas à propos de cloudfront, mais Amazon S3 vous permet de définir n'importe quel en-tête que vous aimez quand vous téléchargez - j'imagine que les CDN le font aussi. – Nik

Techniquement, vous pouvez définir cette façon dans .htaccess fichier:

# Set up caching on images for 1 month 
<FilesMatch "\.(jpg|jpeg|png|ico|gif)$"> 
ExpiresDefault A2419200 
</FilesMatch>

Si vous voulez avec cette image de force de paramètres pour rafraîchir, append ce à son URL:

'?'+ new Date().getTime()

Source

2014-04-18 11:49:05

Mise en cache dynamiquement les images chargées

Répondre

Questions connexes