Pregunta La forma oficial de preguntarle a jQuery que todas las imágenes se carguen antes de ejecutar algo


En jQuery cuando haces esto:

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

Espera a que el DOM cargue y ejecute tu código. Si no se cargan todas las imágenes, entonces todavía ejecuta el código. Obviamente, esto es lo que queremos si estamos inicializando cualquier elemento DOM como mostrar u ocultar elementos o adjuntar eventos.

Sin embargo, digamos que quiero algo de animación y no quiero que se ejecute hasta que se carguen todas las imágenes. ¿Hay una forma oficial en jQuery para hacer esto?

La mejor manera que tengo es usar <body onload="finished()">, pero realmente no quiero hacer eso a menos que sea necesario.

Nota: hay un error en jQuery 1.3.1 en Internet Explorer que realmente espera a que se carguen todas las imágenes antes de ejecutar el código dentro $function() { }. Entonces, si usa esa plataforma, obtendrá el comportamiento que estoy buscando en lugar del comportamiento correcto descrito anteriormente.


601
2018-02-13 06:56


origen


Respuestas:


Con jQuery, usas $(document).ready() para ejecutar algo cuando el DOM está cargado y $(window).on("load", handler) para ejecutar algo cuando todas las demás cosas se cargan también, como las imágenes.

La diferencia se puede ver en el siguiente archivo HTML completo, siempre que tenga un jollyroger Archivos JPEG (u otros adecuados):

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

Con eso, el cuadro de alerta aparece antes de que se carguen las imágenes, porque el DOM está listo en ese punto. Si luego cambias:

$(document).ready(function() {

dentro:

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

entonces el cuadro de alerta no aparece hasta después las imágenes están cargadas

Por lo tanto, para esperar hasta que toda la página esté lista, podría usar algo como:

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

982
2018-02-13 07:03



Escribí un complemento que puede generar devoluciones de llamadas cuando las imágenes se han cargado en elementos, o disparar una vez por cada imagen cargada.

Esto es similar a $(window).load(function() { .. }), excepto que le permite definir cualquier selector para verificar. Si solo quieres saber cuando todas las imágenes en #content (por ejemplo) ha cargado, este es el complemento para usted.

También admite la carga de imágenes a las que se hace referencia en el CSS, como background-image, list-style-image, etc.

plugin jQuery de waitForImages

Ejemplo de uso

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

Ejemplo en jsFiddle.

Hay más documentación disponible en la página de GitHub.


151
2018-03-02 05:45



$(window).load() funcionará solo la primera vez que se carga la página. Si está haciendo cosas dinámicas (ejemplo: haga clic en el botón, espere que se carguen algunas imágenes nuevas), esto no funcionará. Para lograr eso, puedes usar mi complemento:

Manifestación

Descargar

/**
 *  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



Para aquellos que desean que se les notifique la finalización de la descarga de una sola imagen que se solicita después $(window).load incendios, puede usar los elementos de la imagen load evento.

p.ej.:

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



Ninguna de las respuestas hasta ahora ha dado lo que parece ser la solución más simple.

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

8
2017-11-14 13:15



Yo recomendaría usar imagesLoaded.js javascript library.

Por qué no usar jQuery's $(window).load()?

Como se anunció en https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

Es una cuestión de alcance. imagesLoaded te permite enfocar un conjunto de imágenes, mientras que $(window).load() apunta a todos bienes - incluyendo todas las imágenes, objetos, archivos .js y .css, e incluso iframes. Lo más probable es que imagesLoaded se active antes de lo $(window).load() porque está apuntando a un conjunto más pequeño de activos.

Otras buenas razones para usar imagesloaded

  • oficialmente soportado por IE8 +
  • licencia: Licencia MIT
  • dependencias: ninguna
  • peso (minificado y comprimido): 7kb minificado (¡liviano!)
  • generador de descargas (ayuda a reducir el peso): no es necesario, ya es muy pequeño
  • en Github: SÍ
  • comunidad y colaboradores: bastante grande, más de 4000 miembros, aunque solo 13 colaboradores
  • historia y contribuciones: estable como relativamente viejo (desde 2010) pero aún activo

Recursos


5
2018-06-02 19:36



Con jQuery vengo con esto ...

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

Demo: http://jsfiddle.net/molokoloco/NWjDb/


4
2017-10-20 03:52