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 , 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 todas las imágenes se carguen antes de ejecutar el código dentro de $function() { } . Entonces, si usa esa plataforma, obtendrá el comportamiento que estoy buscando en lugar del comportamiento correcto descrito anteriormente.

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

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

                 Hello            // : 100 copies of this        

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 de que se cargan las imágenes.

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

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.

Es similar a $(window).load(function() { .. }) , excepto que le permite definir cualquier selector para verificar. Si solo quiere saber cuándo se #content todas las imágenes en #content (por ejemplo), 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

  • Repositorio de GitHub
  • Léame
  • Fuente de producción
  • Fuente de desarrollo

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.

$(window).load() solo funcionará 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); 

Para aquellos que desean recibir notificaciones sobre la finalización de la descarga de una sola imagen solicitada después de los incendios de $(window).load , puede utilizar el evento de load del elemento de imagen.

p.ej:

 // create a dialog box with an embedded image var $dialog = $("
"); // 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"); });

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

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

Yo recomendaría usar la biblioteca de JavaScript de imagesLoaded.js .

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

Según se describe en https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

Es una cuestión de scope. imagesLoaded le permite dirigir un conjunto de imágenes, mientras que $(window).load() dirige a todos los activos , incluidas todas las imágenes, los objetos, los archivos .js y .css, e incluso los marcos. Lo más probable es que imagesLoaded se active antes de $(window).load() porque se dirige a un conjunto de activos más pequeño.

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

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

Demostración: http://jsfiddle.net/molokoloco/NWjDb/

Utilice imagesLoaded PACKAGED v3.1.8 (6.8 Kb cuando se minimiza). Es relativamente viejo (desde 2010) pero aún está activo.

Puede encontrarlo en github: https://github.com/desandro/imagesloaded

Su sitio oficial: http://imagesloaded.desandro.com/

Por qué es mejor que usar:

 $(window).load() 

Porque es posible que desee cargar imágenes dinámicamente, así: jsfiddle

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

De esta forma, puede ejecutar una acción cuando todas las imágenes dentro del cuerpo o cualquier otro contenedor (que depende de su selección) se carguen. PURE JQUERY, no se necesitan complementos.

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

Mi solución es similar a molokoloco . Escrito como función 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); }; 

ejemplo: