Préchargement d'images avec jQuery

Je recherche un moyen rapide et facile de précharger des images avec JavaScript. J'utilise jQuery si c'est important.

Je l'ai vu ici ( http: //nettuts.com ... ):

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

Mais ça a l'air un peu exagéré pour ce que je veux!

Je sais qu'il existe des plugins jQuery qui font cela, mais ils semblent tous un peu gros (en taille); J'ai juste besoin d'un moyen rapide, facile et court de précharger des images!

Rapide et facile:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Ou, si vous voulez un plugin jQuery:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Voici une version modifiée de la première réponse qui charge réellement les images dans DOM et les masque par défaut.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Utilisez l' objet Image JavaScript .

Cette fonction vous permet de déclencher un rappel lors du chargement de toutes les images. Cependant, notez qu'il ne déclenchera jamais de rappel si au moins une ressource n'est pas chargée. Cela peut être facilement résolu en implémentant le onerrorrappel et en incrémentant la loadedvaleur ou en gérant l'erreur.

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

JP, Après avoir vérifié votre solution, je rencontrais toujours des problèmes dans Firefox où il ne préchargeait pas les images avant de passer au chargement de la page. J'ai découvert cela en en mettant sleep(5)dans mon script côté serveur. J'ai implémenté la solution suivante basée sur la vôtre qui semble résoudre ce problème.

Fondamentalement, j'ai ajouté un rappel à votre plugin de préchargement jQuery, afin qu'il soit appelé une fois que toutes les images sont correctement chargées.

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

Par intérêt, dans mon contexte, j'utilise ceci comme suit:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

J'espère que cela aidera quelqu'un qui vient sur cette page de Google (comme moi) à la recherche d'une solution pour précharger les images sur les appels Ajax.

Ce code jQuery d'une ligne crée (et charge) un élément DOM img sans le montrer:

$('<img src="img/1.jpg"/>');

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

L'utilisation est assez simple:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

J'ai un petit plugin qui gère cela.

Cela s'appelle waitForImages et il peut gérer des imgéléments ou n'importe quel élément avec une référence à une image dans le CSS, par exemple div { background: url(img.png) }.

Si vous vouliez simplement charger toutes les images, y compris celles référencées dans le CSS, voici comment vous le feriez :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

vous pouvez charger des images dans votre html quelque part en utilisant la display:none;règle css , puis les afficher quand vous le souhaitez avec js ou jquery

n'utilisez pas les fonctions js ou jquery pour précharger n'est qu'une règle css contre plusieurs lignes de js à exécuter

exemple: Html

<img src="someimg.png" class="hide" alt=""/>

Css:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

Le préchargement d'images par jquery / javascript n'est pas bon car les images prennent quelques millisecondes à charger dans la page + vous avez des millisecondes pour que le script soit analysé et exécuté, surtout si ce sont de grandes images, il est donc préférable de les masquer en hml pour les performances, car l'image est vraiment préchargée sans être visible du tout, jusqu'à ce que vous le montriez!

ce plugin jquery imageLoader ne fait que 1,39 ko

usage:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

il y a aussi d'autres options comme si vous voulez charger les images de façon synchrone ou asychronique et un événement complet pour chaque image individuelle.

Un moyen rapide et sans plug-in de précharger des images dans jQuery et d'obtenir une fonction de rappel consiste à créer plusieurs imgbalises à la fois et à compter les réponses, par exemple

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

Notez que si vous souhaitez prendre en charge IE7, vous devrez utiliser cette version légèrement moins jolie (qui fonctionne également dans d'autres navigateurs):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Merci pour cela! Je voudrais ajouter un petit riff à la réponse du JP - je ne sais pas si cela va aider quelqu'un, mais de cette façon vous n'avez pas à créer un tableau d'images, et vous pouvez précharger toutes vos grandes images si vous nommez vos pouces correctement. C'est pratique car j'ai quelqu'un qui écrit toutes les pages en html, et cela leur assure une étape de moins - éliminant le besoin de créer le tableau d'images, et une autre étape où les choses pourraient être gâchées.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

Fondamentalement, pour chaque image de la page, elle saisit le src de chaque image, si elle correspond à certains critères (c'est un pouce ou une image de page d'accueil), elle change le nom (une chaîne de base remplace dans l'image src), puis charge les images .

Dans mon cas, la page était pleine d'images de pouce toutes nommées quelque chose comme image_th.jpg, et toutes les grandes images correspondantes sont nommées image_lg.jpg. Le pouce vers grand remplace simplement le _th.jpg par _lg.jpg, puis précharge toutes les grandes images.

J'espère que cela aide quelqu'un.

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

J'utilise le code suivant:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

J'utiliserais un fichier Manifest pour dire aux navigateurs Web (modernes) de charger également toutes les images pertinentes et de les mettre en cache. Utilisez Grunt et grunt-manifest pour le faire automatiquement et ne vous inquiétez plus jamais des scripts de préchargement, des invalidateurs de cache, du CDN, etc.

https://github.com/gunta/grunt-manifest

Cela fonctionne pour moi même dans IE9:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Je voulais le faire avec une superposition personnalisée de l'API Google Maps. Leur exemple de code utilise simplement JS pour insérer des éléments IMG et la zone d'espace réservé pour l'image s'affiche jusqu'à ce que l'image soit chargée. J'ai trouvé ici une réponse qui a fonctionné pour moi: https://stackoverflow.com/a/10863680/2095698 .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

Cela précharge une image comme suggéré précédemment, puis utilise le gestionnaire pour ajouter l'objet img après le chargement de l'URL img. La documentation de jQuery prévient que les images mises en cache ne fonctionnent pas bien avec ce code d'événement / gestionnaire, mais cela fonctionne pour moi dans FireFox et Chrome, et je n'ai pas à me soucier d'IE.

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr('src',value) ne pas .attr('src',this)

juste pour le signaler :)

5 lignes en coffeescript

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Pour ceux qui connaissent un peu le script d'action, vous pouvez vérifier le lecteur flash, avec un minimum d'effort, et créer un préchargeur flash, que vous pouvez également exporter vers html5 / Javascript / Jquery. Pour l'utiliser si le lecteur flash n'est pas détecté, consultez des exemples sur la façon de le faire avec le rôle YouTube sur le lecteur html5 :) Et créez le vôtre. Je n'ai pas les détails, car je n'ai pas encore commencé, si je n'ai pas oublié, je le posterai plus tard et j'essaierai un code Jquery standard pour le mien.