javascript - poner - insertar imagen html5

¿Cómo puedo verificar si una imagen de fondo está cargada?

Question

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?

Answer 1

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

Answer 2

Aquí hay un pequeño complemento que hice para que pueda hacer exactamente esto, 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 ir directamente al código del complemento:

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

Así que solo incluye el complemento y luego llámalo al elemento:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $(''body'').bgLoaded();
</script>

Obviamente descarga el complemento y guárdalo en tu propio hosting.

De forma predeterminada, agrega una clase adicional "bg-loaded" a cada elemento coincidente una vez que se carga el fondo, pero puede cambiarlo fácilmente pasándole una función diferente como esta:

<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í hay un códec que lo demuestra funcionando.

http://codepen.io/catmull/pen/Lfcpb

Answer 3

Hice un truco javascript puro para que esto sea 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;
}

Answer 4

Localicé una solución que funcionó mejor para mí, y que tiene la ventaja de ser utilizable con varias imágenes (caso no ilustrado en este ejemplo).

De la respuesta de @ adeneo a esta pregunta :

Si tiene un elemento con una imagen de fondo, como este

<div id="test" style="background-image: url(link/to/image.png)"><div>

Puede esperar a que se cargue el fondo obteniendo la URL de la imagen y usándola para un objeto de imagen en javascript con un controlador de carga.

var src = $(''#test'').css(''background-image'');
var url = src.match(//((.*?)/)/)[1].replace(/(''|")/g,'''');

var img = new Image();
img.onload = function() {
    alert(''image loaded'');
}
img.src = url;
if (img.complete) img.onload();

Answer 5

No hay devoluciones de llamada JS para los activos de CSS.

Answer 6

Tengo un complemento jQuery llamado waitForImages que puede detectar cuando las imágenes de fondo se han descargado.

$(''body'')
  .css(''background-image'',''url(http://picture.de/image.png)'')
  .waitForImages(function() {
    alert(''Background image done loading'');
    // This *does* work
  }, $.noop, true);

Answer 7

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á un evento de carga para detectar cuándo se carga el src.

Answer 8

https://github.com/alexanderdickson/waitForImages

$(''selector'').waitForImages({
    finished: function() {
       // ...
    },
    each: function() {
       // ...
    },
    waitForAll: true
});