Question Préchargement d'images avec jQuery


Je suis à la recherche d'un moyen rapide et facile de précharger les images avec JavaScript. J'utilise jQuery si c'est important.

J'ai vu ça 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, il semble 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'une manière rapide, facile et rapide de précharger les images!


661
2018-01-24 21:25


origine


Réponses:


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

945
2018-01-24 21:28



Voici une version modifiée de la première réponse qui charge 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');
    });
}

95
2017-09-05 18:12



Utiliser JavaScript Objet d'image.

Cette fonction vous permet de déclencher un rappel lors du chargement de toutes les images. Toutefois, notez qu'il ne déclenchera jamais un rappel si au moins une ressource n'est pas chargée. Cela peut être facilement résolu en mettant en œuvre onerror rappel et incrémentation loaded valeur ou la gestion de 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');
});

50
2018-06-30 12:41



JP, Après avoir vérifié votre solution, j'avais toujours des problèmes avec Firefox, ce qui ne permettait pas de précharger les images avant de passer au chargement de la page. Je l'ai découvert en mettant quelques 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 cela.

Fondamentalement, j'ai ajouté un rappel à votre plugin de précharge jQuery, afin qu'il soit appelé après 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 je l'ai fait) à chercher une solution pour précharger les images sur les appels Ajax.


34
2018-01-22 00:06



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

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

24
2018-04-02 21:37



$.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/


21
2018-01-22 14:49



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

C'est appelé waitForImages et il peut gérer img éléments ou tout élément avec une référence à une image dans le CSS, par ex. div { background: url(img.png) }.

Si vous vouliez simplement charger tout 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.
    }  
});

19
2018-05-06 00:07



vous pouvez charger des images dans votre code HTML quelque part en utilisant css display:none; règle, puis montrez-les quand vous voulez avec js ou jquery

n'utilisez pas les fonctions js ou jquery pour précharger, c'est juste une règle css Vs 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 des 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 s'il s'agit de grandes images. parce que l'image est vraiment préchargée sans être visible du tout, jusqu'à ce que vous montriez cela!


13
2018-04-18 16:43



cette jquery imageLoader le plugin est juste 1.39kb

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 manière synchrone ou asynchrone et un événement complet pour chaque image individuelle.


13
2018-03-28 15:02



Une méthode rapide et sans plug-in pour précharger les images dans jQuery et obtenir une fonction de rappel consiste à créer plusieurs img étiquettes à la fois et compte les réponses, par ex.

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 voulez 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();
        }
    });
}

8
2018-06-12 14:50