Question Méthode officielle pour demander à jQuery d'attendre que toutes les images soient chargées avant d'exécuter quelque chose


En jQuery quand vous faites ceci:

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

Il attend que le DOM se charge et exécute votre code. Si toutes les images ne sont pas chargées, le code est toujours exécuté. C'est évidemment ce que nous voulons si nous initialisons des choses DOM telles que montrer ou cacher des éléments ou attacher des événements.

Disons que je veux de l'animation et que je ne veux pas qu'elle fonctionne tant que toutes les images ne sont pas chargées. Existe-t-il un moyen officiel dans jQuery de faire cela?

La meilleure façon dont j'ai est d'utiliser <body onload="finished()">, mais je ne veux pas vraiment le faire à moins d'y être obligé.

Note: Il y a un bug dans jQuery 1.3.1 dans Internet Explorer qui attend que toutes les images soient chargées avant d'exécuter le code à l'intérieur $function() { }. Donc, si vous utilisez cette plate-forme, vous obtiendrez le comportement que je recherche au lieu du comportement correct décrit ci-dessus.


601
2018-02-13 06:56


origine


Réponses:


Avec jQuery, vous utilisez $(document).ready() 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ées, comme les images.

La différence peut être vu dans le fichier HTML complet suivant, à condition que vous ayez un jollyroger Fichiers JPEG (ou autres fichiers appropriés):

<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 apparaît avant que les images sont chargées, parce que le DOM est prêt à ce point. Si vous changez ensuite:

$(document).ready(function() {

dans:

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

alors la boîte d'alerte n'apparaît que après les images sont chargées.

Par conséquent, pour attendre que la page entière soit prête, vous pouvez utiliser quelque chose comme:

$(window).on("load", function() {
    // weave your magic here.
});

982
2018-02-13 07:03



J'ai écrit un plugin qui peut déclencher des rappels lorsque des images sont chargées dans des éléments, ou déclencher une fois par image chargée.

C'est similaire à $(window).load(function() { .. }), sauf qu'il vous permet de définir un sélecteur à vérifier. Si vous voulez seulement savoir quand toutes les images #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, tels que background-image, list-style-image, etc.

waitForImages Plugin jQuery

Exemple d'utilisation

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

Exemple sur jsFiddle.

Plus de documentation est disponible sur la page GitHub.


151
2018-03-02 05:45



$(window).load() ne fonctionnera que la première fois que la page est chargée. Si vous faites des choses dynamiques (exemple: cliquez sur le bouton, attendez le chargement de nouvelles images), cela ne fonctionnera 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);

48
2017-07-26 20:18



Pour ceux qui veulent être informés du téléchargement d'une seule image qui est demandée après $(window).load feux, vous pouvez utiliser l'élément de l'image load un é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");
});

19
2017-10-23 21:17



Aucune des réponses données jusqu'ici n'a donné ce qui semble être la solution la plus simple.

$('#image_id').load(
  function () {
    //code here
});

8
2017-11-14 13:15



Je recommanderais d'utiliser imagesLoaded.js bibliothèque javascript.

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

Comme indiqué 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() vise tous les atouts - y compris toutes les images, objets, fichiers .js et .css, et même les iframes. Très probablement, imagesLoaded se déclenchera plus tôt que $(window).load() parce qu'il vise 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é & gzipped): 7kb minifié (lumière!)
  • constructeur de téléchargement (aide à réduire le poids): pas besoin, déjà minuscule
  • sur Github: OUI
  • communauté et contributeurs: assez gros, plus de 4000 membres, bien que seulement 13 contributeurs
  • histoire & contributions: stable comme relativement vieux (depuis 2010) mais toujours actif

Ressources


5
2018-06-02 19:36



Avec jQuery je viens avec ça ...

$(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émonstration http://jsfiddle.net/molokoloco/NWjDb/


4
2017-10-20 03:52



Utilisez imagesLoaded PACKAGED v3.1.8 (6.8 Ko lorsque minimisé). Il est relativement ancien (depuis 2010) mais reste un projet actif.

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

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

Pourquoi est-ce mieux que d'utiliser:

$(window).load() 

Parce que vous voudrez peut-être charger des images dynamiquement, comme ceci: jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});

1
2018-04-01 19:25



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ées. PURE JQUERY, pas de pluggins nécessaires.

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

1
2018-06-29 11:34



Ma solution est similaire à molokoloco. Écrit en tant que 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>

0