Quiero establecer una imagen de fondo en la etiqueta del cuerpo, luego ejecutar un código, como este:
$('body').css('background-image','http://picture.de/image.png').load(function() { alert('Background image done loading'); // This doesn't work });¿Cómo puedo asegurarme de que la imagen de fondo esté completamente cargada?
prueba esto:
$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() { $(this).remove(); // prevent memory leaks as @benweet suggested $('body').css('background-image', 'url(http://picture.de/image.png)'); });esto creará una nueva imagen en la memoria y usará el evento de carga para detectar cuándo se carga el src.
EDITAR: en Vanilla JavaScript puede verse así:
var src = 'http://picture.de/image.png'; var image = new Image(); image.addEventListener('load', function() { body.style.backgroundImage = 'url(' + src + ')'; }); image.src = src;se puede resumir en una función práctica que devuelve una promesa:
function load(src) { return new Promise((resolve, reject) => { const image = new Image(); image.addEventListener('load', resolve); image.addEventListener('error', reject); image.src = src; }); } const image = 'http://placekitten.com/200/300'; load(image).then(() => { body.style.backgroundImage = `url(${image})`; });Tengo un complemento de jQuery llamado waitForImages que puede detectar cuándo se han descargado las imágenes de fondo.
$('body') .css('background-image','url(http://picture.de/image.png)') .waitForImages(function() { alert('Background image done loading'); // This *does* work }, $.noop, true);No hay devoluciones de llamada JS para activos CSS.