Officiel pour demander jQuery attendre que toutes les images à charger avant l'exécution de quelque chose

En jQuery lorsque vous faites cela:

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

Il attend pour les DOM à charge et exécute votre code. Si toutes les images ne sont pas chargées puis il encore exécute le code. C'est évidemment ce que nous voulons si nous sommes à l'initialisation de toutes les DOM des choses telles que les affichant ou en masquant des éléments ou d'attacher des événements.

Disons que si je veux de l'animation et je ne veux pas en cours d'exécution jusqu'à ce que toutes les images sont chargées. Est-il un moyen officiel de jQuery pour faire ça?

La meilleure façon que j'ai est d'utiliser <body onload="finished()">, mais je ne veux pas vraiment à le faire que si je dois le faire.

Remarque: Il y a un bug dans jQuery 1.3.1 dans Internet Explorer qui fait en fait attendre que toutes les images à charger avant l'exécution de code à l'intérieur de $function() { }. Donc, si vous êtes en utilisant cette plate-forme, vous aurez le comportement, je suis à la recherche au lieu de la corriger le comportement décrit ci-dessus.

  • ne pas $("img").load() travail?
  • Je pense qu'il vaut de mentionner que si vous définissez les dimensions des attributs, vous ca en toute sécurité exécuter un code en fonction ready qui s'appuient sur ces dimensions. Avec php, vous pouvez les attraper avec php.net/manual/en/function.getimagesize.php sur télécharger pour les stocker en db ou avant la sortie du navigateur.
  • si vous voulez quelque chose de faire un travail incroyable, alors découvrez la très bonne & populaire imagesloaded bibliothèque javascript mentionnés dans cette réponse, en dessous de stackoverflow.com/a/26458347/759452
  • "Ici, je suis venu pour trouver de tout, sauf d'une manière officielle."
InformationsquelleAutor Simon_Weaver | 2009-02-13
  1. 1012

    Avec jQuery, vous utilisez $(document).ready() pour exécuter quelque chose quand le DOM est chargé et $(window).on("load", handler) à exécuter quelque chose, quand toutes les autres choses sont chargés, tels que les images.

    La différence peut être vu dans la suite complète fichier HTML, si vous avez un jollyroger fichiers JPEG (ou autre celles qui conviennent):

    <html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        //: 100 copies of this
        <img src="jollyroger99.jpg">
    </body>
</html>

    Avec cela, la boîte d'alerte s'affiche avant que les images sont chargées, parce que le DOM est prêt à ce point. Si vous modifiez ensuite:

    $(document).ready(function() {

    dans:

    $(window).on("load", function() {

    puis la boîte d'alerte n'apparaît pas jusqu'à ce que après les images sont chargées.

    Donc, attendre jusqu'à ce que la totalité de la page est prête, vous pouvez utiliser quelque chose comme:

    $(window).on("load", function() {
    //weave your magic here.
});
    • sent front +1 totalement oublié que. $(window).load() ne sont pas le feu jusqu'à ce que les images sont fait.
    • merci! qu'il a fait. je ne l'avais pas remarquer à quel point le effet a été jusqu'à ce que j'ai testé en local dans Safari sur Windows. ensuite, il est devenu douloureusement évident que j'avais besoin pour ce faire. sent front
    • sauf que vous n'avez pas besoin de le d'attente de chose. il suffit de mettre la logique de la charge(..). c'est ce que tu entend par "sent front'?
    • Nan, j'ai juste claqué mon front en raison de la réponse. au départ, il n'avait pas l'attente des choses.
    • Si vous le savez, Safari parfois des feux onload avant les images ont complètement chargé. Je ne peux pas le reproduire de manière fiable, mais cela arrive.
    • donc, est-ce que cela va aussi affecter $(window).charge ou juste le corps.onload ?
    • Je veux juste que vous sachiez, que ce bout de roches. J'ai eu un problème avec une image curseur qui s'estompe une image (#current_pic), puis les changements de la src, puis disparaît de la même #current_pic de retour dans. Le navigateur essaie de montrer l'image avant de l'chargé --> et pas de décoloration. Ensuite, j'ai utilisé: $("#current_pic").load(function{ $("#current_pic").fadeIn('slow'); }); et le navigateur attend jusqu'à ce que le chargement et le slick fadeIn action fonctionne. Merci!
    • J'ai fait la même chose. Même, de lire à travers une réponse, ne sachant pas que c'était moi, et toujours pas à la comprendre.
    • Semble fonctionner pour csssprite images d'arrière-plan trop 🙂
    • Juste une remarque: cela ne semble pas fonctionner sous Chrome (et je présume que le Chrome). L' $(window).prêt événement semble incendie, le même que $(document).prêt - avant pour les images en cours d'achèvement.
    • mais c'est $(window).load(function())
    • $(window).load(), $(window).prêt() et $(document).prêt() sont tous de tir pour moi avant les images de chargement en Chrome.
    • $(window).load(), $(window).prêt() et $(document).prêt() échec pour moi dans IE11. Ils mettent le feu avant les images de l'ensemble grâce à css sont chargés.
    • essayez $(window).sur("load",function(){
    • Êtes-vous sûr que ce n'est pas seulement parce que les images dans IE ont été mis en cache? Si cela se produit, ils ne se déclenche pas une "charge" de l'événement à tous. Cet article permet de contourner ce problème.
    • fixe que
    • cela ne fonctionne pas avec safari
    • fonctionne parfaitement lorsque les images sont dans des iframes

    InformationsquelleAutor paxdiablo
  2. 156

    J'ai écrit un plugin qui peut tirer des rappels lorsque les images ont été téléchargées dans les éléments, ou un incendie, une fois par image chargée.

    Il est semblable à $(window).load(function() { .. }), sauf qu'il vous permet de définir n'importe quel sélecteur à vérifier. Si vous voulez savoir quand toutes les images dans #content (par exemple) ont chargé, c'est le plugin pour vous.

    Il prend également en charge le chargement des images référencées dans le CSS, comme background-image, list-style-image, etc.

    waitForImages plugin jQuery

    Exemple D'Utilisation

    $('selector').waitForImages(function() {
    alert('All images are loaded.');
});

    Exemple sur jsFiddle.

    Plus la documentation est disponible sur le GitHub de la page.

    • Merci!!!!! $.load() ne fonctionnait pas pour moi, mais cela fait l'affaire parfaitement.
    • J'utilise la Version Chrome 22.0.1229.94 et ce plugin, et j'ai essayé de lire les décalages par rapport aux images chargées dans le waitFormImages: ('img selector').each(function(index) { var offset = $(this).offset(); ...}); , cependant, le décalage.top est toujours égale à zéro. Pourquoi?
    • Difficile à dire sans plus de contexte. Merci de soulever un problème sur le de la page.
    • Sa ne marche pas pour moi quand les images sont cahced. Ne any1 vha une solution pour cela ?
    • Ouvrir un question avec un minimum de cas de test.
    • Cette bibliothèque m'a beaucoup aidé et doit avoir été une partie de jquery. Heck, même .load() a une mise en garde api.jquery.com/load
    • Pourriez-vous mettre à jour le jsFiddle? (Il ne marche plus à cause de github n'étant pas un CDN)
    • Son essentiellement analogique à imagesLoaded mais il fonctionne avec srcsets trop. Exactement ce que je cherchais! Super plugin!

    InformationsquelleAutor alex
  3. 48

    $(window).load() fonctionnera uniquement la première fois que la page est chargée. Si vous faites de la dynamique des trucs (exemple: cliquez sur le bouton, attendre quelques nouvelles images pour la charge), cela ne fonctionne pas. Pour ce faire, vous pouvez utiliser mon plugin:

    Démo

    Télécharger

    /**
*  Plugin which is applied on a list of img objects and calls
*  the specified callback function, only when all of them are loaded (or errored).
*  @author:  H. Yankov (hristo.yankov at gmail dot com)
*  @version: 1.0.0 (Feb/22/2010)
*  http://yankov.us
*/
(function($) {
$.fn.batchImageLoad = function(options) {
var images = $(this);
var originalTotalImagesCount = images.size();
var totalImagesCount = originalTotalImagesCount;
var elementsLoaded = 0;
//Init
$.fn.batchImageLoad.defaults = {
loadingCompleteCallback: null, 
imageLoadedCallback: null
}
var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);
//Start
images.each(function() {
//The image has already been loaded (cached)
if ($(this)[0].complete) {
totalImagesCount--;
if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
//The image is loading, so attach the listener
} else {
$(this).load(function() {
elementsLoaded++;
if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
//An image has been loaded
if (elementsLoaded >= totalImagesCount)
if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
});
$(this).error(function() {
elementsLoaded++;
if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
//The image has errored
if (elementsLoaded >= totalImagesCount)
if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
});
}
});
//There are no unloaded images
if (totalImagesCount <= 0)
if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);
    • il n'y a pas l'option de télécharger ce ..
    • juste au cas où quelqu'un a besoin d'un exemple d'utilisation de la BatchImagesLoad plugin: yankov.us/batchImageLoad
    • Je ne veux pas de manque de respect, mais on ne peut pas compter "que" sur ta parole au sujet de la fiabilité de votre plugin. Comme indiqué dans le Yevgeniy Afanasyev's réponse, imagesLoaded fait un bien meilleur travail à ce & couvrir les cas d'utilisation que vous avez mentionné le long avec de nombreux autres cas de coin (voir l'résolu github questions).
    InformationsquelleAutor
  4. 19

    Pour ceux qui veulent être informés de la fin du téléchargement d'une image unique qui obtient demandé après $(window).load feux, vous pouvez utiliser l'image de l'élément load événement.

    par exemple:

    //create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");
//get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");
//wait for the image to load 
$imgElement.load(function() {
alert("The image has loaded; width: " + $imgElement.width() + "px");
});
    InformationsquelleAutor Dan Passaro
  5. 10

    Aucune réponse jusqu'à présent ont donné à ce qui semble être la solution la plus simple.

    $('#image_id').load(
function () {
//code here
});
    • Ce qui est bien c'est que vous pouvez l'obtenir à déclencher pour des images individuelles dès qu'ils ont la charge.
    InformationsquelleAutor Coz
  6. 6

    Je vous conseille d'utiliser imagesLoaded.js bibliothèque javascript.

    Pourquoi ne pas utiliser du jQuery $(window).load()?

    Comme ansered sur https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

    C'est une question de portée. imagesLoaded vous permet de cibler un ensemble d'images, alors que $(window).load() cibles de tous les actifs — y compris toutes les images, les objets, les .js et .les fichiers css, et même les iframes. Le plus probable, imagesLoaded va déclencher plus tôt que $(window).load() parce que c'est le ciblage d'un plus petit ensemble d'actifs.

    D'autres bonnes raisons d'utiliser imagesloaded

    • officiellement soutenu par IE8+
    • licence: Licence MIT
    • dépendances: aucune
    • poids (minifiés & gzippé) : 7kb minimisé (lumière!)
    • télécharger générateur (permet de réduire le poids) : pas besoin, déjà minuscule
    • sur Github : OUI
    • de la communauté & contributeurs : assez grande, plus de 4000 membres, bien que seulement 13 contributeurs
    • histoire & contributions : stable comme relativement ancienne (depuis 2010), mais toujours actif projet

    Ressources

    InformationsquelleAutor Adrien Be
  7. 4

    Avec jQuery-je venir avec cette...

    $(function() {
var $img = $('img'),
totalImg = $img.length;
var waitImgDone = function() {
totalImg--;
if (!totalImg) alert("Images loaded!");
};
$('img').each(function() {
$(this)
.load(waitImgDone)
.error(waitImgDone);
});
});

    Démo : http://jsfiddle.net/molokoloco/NWjDb/

    • J'ai trouvé que cela ne fonctionnera pas correctement si le navigateur renvoie 304 Pas Mofified de réponse pour l'image ce qui signifie que l'image est mise en cache.
    InformationsquelleAutor molokoloco
  8. 1

    Utilisation imagesLoaded EMBALLÉS v3.1.8 (6.8 Kb lorsqu'il est réduit). Il est relativement ancienne (depuis 2010), mais toujours active du projet.

    Vous pouvez le trouver sur github:
    https://github.com/desandro/imagesloaded

    Leur site officiel:
    http://imagesloaded.desandro.com/

    Pourquoi c'est mieux que d'utiliser: 

    $(window).load()

    Car vous pouvez charger des images de façon dynamique, comme ceci: jsfiddle

    $('#button').click(function(){
$('#image').attr('src', '...');
});
    • En fait, imagesloaded ne prend pas en charge le changement de la valeur de l'attribut src de la croix-navigateur. Vous devez créer un nouvel élément de l'image à chaque fois. Essayer sur Firefox et vous verrez le problème apparaître.
    • Bon point, je ne l'ai testé sur Google chrome et IE-11 encore. Il travaillait. Merci.
    • J'ai ajouté cette croix-problème de navigateur dans ma question stackoverflow.com/q/26927575 dans le point "Ce que vous ne pouvez pas faire avec imagesloaded", voir la imagesLoaded problème sur Github github.com/desandro/imagesloaded/issues/121
    InformationsquelleAutor Yevgeniy Afanasyev
  9. 1

    De cette façon, vous pouvez exécuter une action lorsque toutes les images à l'intérieur du corps ou de tout autre conteneur (qui dépend de votre sélection) sont chargés. PURE JQUERY, pas de pluggins nécessaire.

    var counter = 0;
var size = $('img').length;
$("img").load(function() { //many or just one image(w) inside body or any other container
counter += 1;
counter === size && $('body').css('background-color', '#fffaaa'); //any action
}).each(function() {
this.complete && $(this).load();        
});
    InformationsquelleAutor Mario Medrano
  10. 0

    Ma solution est similaire à molokoloco. Écrite comme une fonction jQuery:

    $.fn.waitForImages = function (callback) {
var $img = $('img', this),
totalImg = $img.length;
var waitImgLoad = function () {
totalImg--;
if (!totalImg) {
callback();
}
};
$img.each(function () {
if (this.complete) { 
waitImgLoad();
}
})
$img.load(waitImgLoad)
.error(waitImgLoad);
};

    exemple:

    <div>
<img src="img1.png"/>
<img src="img2.png"/>
</div>
<script>
$('div').waitForImages(function () {
console.log('img loaded');
});
</script>
    InformationsquelleAutor Mariusz Charczuk