Façon officielle de demander à jQuery d'attendre que toutes les images se chargent avant d'exécuter quelque chose

j'ai écrit un plugin qui peut lancer des callbacks lorsque les images ont été chargées dans des éléments, ou tirer 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 supporte également le chargement d'images référencées dans le CSS, telles que background-image , list-style-image , etc.

waitforimages jQuery plugin

• GitHub repository .
• Readme .
• source de Production .
• "1519270920 de Développement" source .

Exemple D'Usage

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

exemple sur jsFiddle .

plus de documentation disponible sur la page GitHub.

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

pour ceux qui veulent être informés de l'achèvement du téléchargement d'une seule image qui est demandée après $(window).load incendies, vous pouvez utiliser l'événement load de l'élément d'image.

p.ex.:

// 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");
});

aucune des réponses jusqu'à présent n'a donné ce qui semble être la solution la plus simple.

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

je recommande l'utilisation de imagesLoaded.js bibliothèque javascript.

pourquoi ne pas utiliser le $(window).load() de jQuery ?

comme répondu sur https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

C'est une question de portée. imagesload vous permet de cibler un ensemble d'images, alors que $(window).load() cible tous les actifs - y compris toutes les images, objets, .js et .fichiers css, et même iframes. Très probablement, imagesload déclenchera plus tôt que $(window).load() parce qu'il vise un plus petit ensemble d'actifs.

autres bonnes raisons d'utiliser imagesloaded

• officiellement soutenu par IE8+
• licence: MIT licence
• dépendances: aucune
• poids (minifiés et gzippé) : 7kb minimisé (la lumière!)
• download builder (aide à réduire le poids): pas besoin, déjà minuscule
• sur Github: Oui
"1519210920 de" communauté et contributeurs : assez grande, plus de 4000 membres, bien que seulement 13 contributeurs
• histoire et contributions : stable comme relativement ancienne (depuis 2010), mais toujours actif projet

ressources

• projet sur github: https://github.com/desandro/imagesloaded
• site officiel: http://imagesloaded.desandro.com/
• vérifier si une image est chargée (pas d'erreurs) en JavaScript
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded bibliothèque javascript: quel est le navigateur et le support de périphérique?

avec jQuery je viens avec ceci...

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

utiliser imagesLoaded PACKAGED v3.1.8 (6.8 Kb when minimized). Il s'agit d'un projet relativement ancien (depuis 2010) mais toujours actif.

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

parce que vous pouvez vouloir charger des images dynamiquement, comme ceci: jsfiddle

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

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

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

ma solution est similaire à molokoloco . Écrit comme la 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>