Comment mettre en cache une image dans Javascript

comme @Pointy a dit que vous ne cachez pas les images avec javascript, le navigateur le fait. et c'est peut-être ce que vous demandez et ne peut pas être... mais vous pouvez précharger les images en utilisant javascript. En mettant toutes les images que vous voulez précharger dans un tableau et en mettant toutes les images dans ce tableau dans des éléments img cachés, vous Préchargez (ou mettez en cache) les images.

var images = [
'/path/to/image1.png',
'/path/to/image2.png'
];

$(images).each(function() {
var image = $('<img />').attr('src', this);
});

Il ya quelques choses que vous pouvez regarder:

pré-chargement de vos images

Définir une heure de cache dans un.fichier htaccess

Taille du fichier des images et Base64 les encodant.

préchargement: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

la mise en Cache: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

il y a quelques idées différentes pour l'encodage de base64, certains disent que le http demande de réduire la bande passante, tandis que d'autres disent que le chargement" perçu " est meilleur. Je vais laisser cela en l'air.

j'ai un similaires réponse pour asynchrones préchargement des images via JS. Charger dynamiquement est la même chose que de les charger normalement. ils seront cache.

quant à la mise en cache, vous ne pouvez pas contrôler le navigateur mais vous pouvez le configurer via le serveur. si vous avez besoin de charger une ressource vraiment fraîche sur demande, vous pouvez utiliser la technique de Buster de cache pour forcer la charge d'une ressource fraîche.

même si votre question dit" utiliser javascript", vous pouvez utiliser l'attribut prefetch d'une étiquette de lien pour précharger n'importe quel bien. En date de cette écriture (10 août 2016) il n'est pas pris en charge en Safari, mais est à peu près partout ailleurs:

<link rel="prefetch" href="(url)">

plus d'informations sur le support ici: http://caniuse.com/#search=prefetch

notez que IE 9,10 ne sont pas listés dans la matrice caniuse parce que Microsoft a cessé de les prendre en charge.

donc si vous étiez vraiment bloqué sur l'utilisation de javascript, vous pourriez utiliser jquery pour ajouter dynamiquement ces éléments à votre page aussi bien; -)

j'utilise une technique similaire pour télécharger des images, mais je ne peux m'empêcher de remarquer que Javascript n'accède pas au cache du navigateur lors du premier chargement.

mon exemple:

j'ai une bannière tournante sur ma page d'accueil avec 4 images le curseur attendre 2 secondes, que le javascript charge l'image suivante, attend 2 secondes, etc.

ces images ont des urls uniques qui changent à chaque fois que je les modifie, donc ils obtiennent des en-têtes de cache qui vont cache dans le navigateur pendant un an.

max-age: 31536000, public

maintenant quand J'ouvre Chrome Devtools et que je m'assure que l'option de 'Disable cache' n'est pas active et charge la page pour la première fois (après avoir nettoyé le cache) toutes les images obtiennent fetch et ont un statut 200. Après un cycle complet de toutes les images dans la bannière le réseau demande l'arrêt et les images mises en cache sont utilisées.

maintenant quand je fais un rafraîchissement régulier ou aller à une sous-page et cliquez en arrière, les images qui sont dans le cache semble être ignoré. Je m'attendrais à voir un message gris "de cache disque" dans L'onglet Réseau de Chrome devtools. Au lieu de cela, je vois les requêtes passer toutes les deux secondes avec un cercle de statut vert au lieu de gris, je vois des données être transférées, donc j'ai l'impression que le cache n'est pas accédé du tout à partir de javascript. Il récupère simplement l'image chaque fois que la page est chargée.

ainsi chaque requête vers la page d'accueil déclenche 4 requêtes indépendamment de la mise en cache politique de l'image.

compte tenu de l'ensemble de ce qui précède et de la nouvelle norme http2 que la plupart des serveurs web et des navigateurs supportent maintenant, je pense qu'il est préférable d'arrêter d'utiliser lazyloading puisque http2 chargera toutes les images presque simultanément.

si C'est un bug dans Chrome Devtools, ça surprend vraiment que personne ne l'ait remarqué. ;)

Si ceci est vrai, utiliser lazyloading augmente seulement la bande d'utilisation.

Merci de corriger moi si je me trompe. :)

Oui, le navigateur cache les images pour vous, automatiquement.

vous pouvez, cependant, définir un cache d'image à expirer. Découvrez ce Débordement de Pile de questions et de réponses:

Expiration De La Mémoire Cache Sur Les Images Statiques

je préfère toujours utiliser l'exemple mentionné dans Konva JS: image Events pour charger des images.

1. vous devez avoir une liste d'URLs d'image comme objet ou tableau, par exemple:

   var sources = { lion: '/assets/lion.png', monkey: '/assets/monkey.png' };

2. définit la définition de la fonction, où il reçoit la liste des URLs de l'image et une fonction de rappel dans sa liste d'arguments, ainsi quand il termine le chargement de l'image vous peut commencer l'édition sur votre page web:

    function loadImages(sources, callback) {
                var images = {};
                var loadedImages = 0;
                var numImages = 0;
                for (var src in sources) {
                    numImages++;
                }
                for (var src in sources) {
                    images[src] = new Image();
                    images[src].onload = function () {
                        if (++loadedImages >= numImages) {
                            callback(images);
                        }
                    };
                    images[src].src = sources[src];
                }
            }

3. Enfin, vous devez appeler la fonction. Vous pouvez l'appeler par exemple de jQuery 's "1519260920 Document" Prêt

$(document).ready(function (){ loadImages(sources, buildStage); });