Comment ne vous cache une image en Javascript

Une fois qu'une image a été chargé dans n'importe quel chemin dans le navigateur, il sera dans le cache du navigateur et se chargent beaucoup plus rapidement la prochaine fois qu'il est utilisé si cette utilisation est dans la page en cours ou à toute autre page tant que l'image est utilisée avant l'expiration de la mémoire cache du navigateur.

Donc, préalablement mis en cache pour les images, tout ce que vous avez à faire est de les charger dans le navigateur. Si vous souhaitez préalablement mis en cache un tas d'images, il est probablement préférable de le faire avec du javascript, il n'est généralement pas tenir jusqu'au chargement de la page lorsque vous avez terminé de javascript. Vous pouvez le faire comme ceci:

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                //remove image from the array once it's loaded
                //for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);

Cette fonction peut être appelée autant de fois que vous le souhaitez et à chaque fois, il suffit d'ajouter plus d'images à la préalablement mis en cache.

Une fois que les images ont été préchargés comme ceci grâce à javascript, le navigateur va les avoir dans son cache et vous pouvez tout simplement se référer à la normale Url dans d'autres endroits (dans vos pages web) et le navigateur récupère l'URL de son cache plutôt que sur le réseau.

Finalement au fil du temps, le cache du navigateur peut remplir et de le jeter le plus ancien des choses qui n'ont pas été utilisés depuis un certain temps. Donc finalement, les images ne sont chassées du cache, mais ils devraient y rester pendant un certain temps (en fonction de la taille du cache est et combien d'autres de navigation est fait). Chaque fois que les images sont en fait préchargées de nouveau ou utilisé dans une page web, il actualise leur position dans le cache du navigateur automatiquement de sorte qu'ils sont moins susceptibles d'avoir vidé le cache.

Le cache du navigateur est une page de sorte qu'il fonctionne pour n'importe quelle page chargée dans le navigateur. Ainsi, vous pouvez préalablement mis en cache dans un endroit dans votre site et le cache du navigateur fonctionnera ensuite pour toutes les autres pages de votre site.

Lors de la mise en cache préalable comme ci-dessus, les images sont chargés de manière asynchrone afin de ne pas bloquer le chargement ou l'affichage de votre page. Mais, si votre page comporte de nombreuses images de ses propres, ces préalablement mis en cache les images peuvent être en concurrence pour la bande passante ou des connexions avec les images qui sont affichées dans votre page. Normalement, ce n'est pas un notable de la question, mais sur une connexion lente, cette mise en cache préalable pourrait ralentir le chargement de la page principale. Si c'était OK pour précharger les images à charger dernier, alors vous pouvez utiliser une version de la fonction serait d'attendre pour lancer la rondelle jusqu'à ce qu'après que toutes les autres ressources de la page ont été déjà chargé.

function preloadImages(array, waitForOtherResources, timeout) {
    var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    if (!waitForOtherResources || document.readyState === 'complete') {
        loadNow();
    } else {
        window.addEventListener("load", function() {
            clearTimeout(timer);
            loadNow();
        });
        //in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
        //then preload the images anyway after some timeout time
        timer = setTimeout(loadNow, t);
    }

    function loadNow() {
        if (!loaded) {
            loaded = true;
            for (var i = 0; i < imgs.length; i++) {
                var img = new Image();
                img.onload = img.onerror = img.onabort = function() {
                    var index = list.indexOf(this);
                    if (index !== -1) {
                        //remove image from the array once it's loaded
                        //for memory consumption reasons
                        list.splice(index, 1);
                    }
                }
                list.push(img);
                img.src = imgs[i];
            }
        }
    }
}

preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"], true);
preloadImages(["url99.jpg", "url98.jpg"], true);

Il ya quelques choses que vous pouvez regarder:

Pré-chargement de vos images

La fixation d'un délai de cache dans une .fichier htaccess

La taille de fichier des images et de l'encodage base64 eux.

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 ya un couple de différentes pensées pour l'encodage base64, certains disent que les requêtes http de la tourbière vers le bas de la bande passante, tandis que d'autres disent que la "perception" de chargement, c'est mieux. Je vais laisser cela en l'air.

Même si votre question dit "à l'aide de javascript", vous pouvez utiliser le prefetch attribut d'une balise de lien pour le chargement d'un actif. De cette écriture (10 Août 2016), il n'est pas pris en charge dans Safari, mais est à peu près partout ailleurs:

<link href="(url)">

Plus d'infos sur le soutien de ici:
http://caniuse.com/#search=prefetch

Noter que IE 9 et 10 ne sont pas répertoriés dans la caniuse de la matrice parce que Microsoft a cessé le support.

Donc, si vous êtes vraiment coincé sur l'utilisation de javascript, vous pouvez utiliser jquery pour ajouter dynamiquement ces éléments à votre page 😉

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

Toutefois, vous pouvez définir une image cache le point d'expirer. Découvrez ce Débordement de Pile de questions et de réponses:

Expiration De La Mémoire Cache Sur Les Images Statiques