Quiero configurar una imagen de fondo en el cuerpo de la etiqueta, a continuación, ejecutar algún código - de esta manera:¿Cómo puedo verificar si una imagen de fondo está cargada?
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
¿Cómo puedo hacer que la imagen de fondo está totalmente cargada?
probar 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á nueva imagen en la memoria y utilizar el evento de carga para detectar cuando se carga el src.
Parece que la imagen se cargará dos veces sin motivo. – HyderA
@gAMBOOKa Se cargan una vez porque permanecen en la memoria del navegador. Esto es lo mismo, cuando coloca imágenes ocultas en la parte superior de la página y luego las configura en CSS, de modo que las imágenes comienzan a descargarse antes del archivo css, se denomina precarga. – jcubic
No estoy muy seguro, pero creo que te estás refiriendo al caché. No creo que exista la memoria del navegador donde se almacenan los activos. Si se refiere al caché, recuerde que está agregando una solicitud HTTP adicional y que es posible que no todos los clientes tengan habilitada la caché. – HyderA
Algo como esto:
var $div = $('div'),
bg = $div.css('background-image');
if (bg) {
var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
$img = $('<img>').attr('src', src).on('load', function() {
// do something, maybe:
$div.fadeIn();
});
}
});
hola ... esto parece funcionar, aunque configuré el bg.replace a' bg.replace (..., my_src) '. Pero mi pregunta es: una vez que se carga el $ (''), ¿qué pasa exactamente con ese'
'... quiero decir que no es real, es solo un marcador de posición falso, ¿verdad? –
dsdsdsdsd
Correcto. El' ' nunca se inserta en el DOM; simplemente se usa para "engañar" al navegador y cargar el archivo de imagen en caché. –
Colin
útil si no desea invocar a jQuery – vwvan
Tengo una jQuery plugin llamados waitForImages que puede detectar cuando 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);
Este complemento también es excelente para poder mostrar el progreso de carga utilizando el 'each' callback. – Soviut
@alex, ¿Cómo debo verificar cada imagen de fondo para cada elemento en una clase? Intenté esto pero no parece hacerlo bien. $ ('. user_main_photo_thumb'). waitForImages (function() { \t $ (this) .parents ('. photoThumbFrame'). delay (1000) .slideDown(); \t}, función (cargada, cuenta, éxito) { \t}); – Relm
@Relm No lo está usando correctamente. La segunda devolución de llamada es por imagen. Además, 'delay()' no funciona así. – alex
Aquí es un pequeño plugin que hice que le permite hacer exactamente esto, sino que también funciona en múltiples imágenes de fondo y múltiples elementos:
leer el artículo:
http://catmull.uk/code-lab/background-image-loaded/
o vaya directamente al código del complemento:
http://catmull.uk/downloads/bg-loaded/bg-loaded.js
Así que sólo incluyen el plugin y luego llamarlo en el elemento:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded();
</script>
descargar Obviamente el plugin y lo almacena en su propio alojamiento.
Por defecto se añade una clase adicional "bg-cargado" a cada elemento emparejado una vez que se carga el fondo, pero se puede cambiar fácilmente que haciéndolo pasar a una función diferente como esto:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded({
afterLoaded : function() {
alert('Background image done loading');
}
});
</script>
Aquí es un codepen demostrando que funciona.
funciona muy bien! – Vickel
¿Qué pasa si falla? –
https://github.com/alexanderdickson/waitForImages
$('selector').waitForImages({
finished: function() {
// ...
},
each: function() {
// ...
},
waitForAll: true
});
lo hice un javascript puro truco para hacer esto posible.
<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>
O
onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";
css:
.image_error {
display: none;
}
Basta con asignar a la misma URL 'Imagen()' objeto que sí tiene evento 'onload'. –
asegúrese de ajustar la url de css en 'url()' – bluescrubbie