examples - Manera oficial de pedir a jQuery que espere a que todas las imágenes se carguen antes de ejecutar algo
jquery pdf (10)
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/
En jQuery cuando haces esto:
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
Espera a que el DOM se cargue y ejecuta tu código. Si todas las imágenes no están cargadas, entonces todavía se ejecuta el código. Obviamente, esto es lo que queremos si estamos inicializando cualquier cosa del DOM, como mostrar u ocultar elementos o adjuntar eventos.
Sin embargo, digamos que quiero un poco 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 hacerlo a menos que tenga que hacerlo.
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 de $function() { } . Entonces, si está utilizando 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 el DOM y $(window).on("load", handler) para ejecutar algo cuando se cargan todas las demás cosas, como el imagenes
La diferencia se puede ver en el siguiente archivo HTML completo, siempre que tenga un jollyroger 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 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.
});
De esta manera, puede ejecutar una acción cuando se cargan todas las imágenes dentro del cuerpo o cualquier otro contenedor (que depende de su selección). PURO JQUERY, no se necesitan pluggins.
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();
});
Escribí un complemento que puede disparar devoluciones de llamada cuando las imágenes se han cargado en elementos, o disparar una vez por imagen cargada.
Es similar a $(window).load(function() { .. }) , excepto que le permite definir cualquier selector para verificar. Si solo desea saber cuándo se han cargado 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
Ejemplo de uso
$(''selector'').waitForImages(function() {
alert(''All images are loaded.'');
});
Más documentación está disponible en la página de GitHub.
Mi solución es similar al . 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:
<div>
<img src="img1.png"/>
<img src="img2.png"/>
</div>
<script>
$(''div'').waitForImages(function () {
console.log(''img loaded'');
});
</script>
Ninguna de las respuestas hasta ahora ha dado lo que parece ser la solución más simple.
$(''#image_id'').load(
function () {
//code here
});
Para aquellos que deseen recibir una notificación de la finalización de la descarga de una sola imagen que se solicita después 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 = $("<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");
});
Use imagesLoaded PACKAGED v3.1.8 (6.8 Kb cuando esté minimizado). Es un proyecto relativamente antiguo (desde 2010) pero todavía activo.
Lo puedes encontrar en github: https://github.com/desandro/imagesloaded
Su sitio oficial: http://imagesloaded.desandro.com/
Por qué es mejor que usar:
$(window).load()
Debido a que puede querer cargar imágenes dinámicamente, de esta manera: jsfiddle
$(''#button'').click(function(){
$(''#image'').attr(''src'', ''...'');
});
Yo recomendaría usar la imagesLoaded.js javascript imagesLoaded.js .
¿Por qué no usar jQuery''s $(window).load() ?
Como se explica en https://.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951
Es una cuestión de alcance. imagesLoaded le permite apuntar a un conjunto de imágenes, mientras que
$(window).load()apunta a todos los activos , incluidas todas las imágenes, objetos, archivos .js y .css, e incluso iframes. Lo más probable es que imagesLoaded se active antes que$(window).load()porque se dirige a un conjunto más pequeño de activos.
Otras buenas razones para usar imágenes cargadas
- soportado oficialmente por IE8 +
- licencia: licencia MIT
- dependencias: ninguna
- peso (minified y gzipped): 7kb minified (¡ligero!)
- Generador de descargas (ayuda a reducir peso): no es necesario, ya es pequeño
- en Github: SI
- comunidad y colaboradores: bastante grande, más de 4000 miembros, aunque solo 13 contribuyentes
- Historia y contribuciones: estable como relativamente antiguo (desde 2010) pero todavía activo proyecto
Recursos
- Proyecto en github: https://github.com/desandro/imagesloaded
- Sitio web oficial: http://imagesloaded.desandro.com/
- Compruebe si una imagen está cargada (sin errores) en JavaScript
- https://.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
- biblioteca javascript cargada con imágenes: ¿qué es el navegador y la compatibilidad con dispositivos?
$(window).load() solo funcionará la primera vez que se cargue la página. Si está haciendo cosas dinámicas (ejemplo: haga clic en el botón, espere a que se carguen nuevas imágenes), esto no funcionará. Para lograrlo, puedes usar mi plugin:
/**
* 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);