JS espera a que se cargue la image de background de CSS

Es fácil mantener Javascript esperando que se carguen algunas imágenes si esas son imágenes HTML clásicas.

¡Pero no sé cómo hacer lo mismo si la image se carga como una backuground-image CSS!

¿Es posible?

El .load() jQuery .load() no parece aplicarse … y me .load() ideas

4 Solutions collect form web for “JS espera a que se cargue la image de background de CSS”

Busca elementos con atributo src o propiedad backgroundImage css y llama a una function de acción cuando se cargan sus imágenes.

 /** * Load and wait for loading images. */ function loadImages(images, action){ var loaded_images = 0; var bad_tags = 0; $(images).each(function() { //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display")); var image = new Image(); var src = $(this).attr("src"); var backgroundImage = $(this).css("backgroundImage"); // Search for css background style if(src == undefined && backgroundImage != "none"){ var pattern = /url\("{0,1}([^"]*)"{0,1}\)/; src = pattern.exec(backgroundImage)[1]; }else{ bad_tags++; } // Load images $(image).load(function() { loaded_images++; if(loaded_images == ($(images).length - bad_tags)) action(); }) .attr("src", src); }); } 

Un enfoque alternativo sería get los datos de image a través de AJAX como un png codificado en base64 y aplicarlo a la propiedad de background-image de background-image del elemento.

Por ejemplo:

 $.get('/getmyimage', function(data) { // data contains base64 encoded image // for ex: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== $('#yourElement').css('background-image', 'url("' + data + '")'); }); 

También necesitará una secuencia de commands del lado del server que lea la image, la convierta en png codificada en base64 (y la guarde en caching tal vez) y devuelva la misma.

este es un código no probado pero testing esto:

 $(document).ready( function() { var imgSrc = $('theTargerElement').css('background-image'); var imgTag = $('<img>').attr('src',imgSrc).appendTo( 'body' ); } ); $(document) .load( function() { // do stuff } ); 

Prueba este …

Es un jQuery-Plugin que le da control para esperar a que se carguen las imágenes

Proyecto-Inicio

Thread @ SO Forma oficial de preguntarle a jQuery que espere a que se carguen todas las imágenes antes de ejecutar algo

Answer @ SO (ShortLink)

  • Más videos de Vimeo en un solo jugador que se reproducen automáticamente
  • firefox addon sdk: ¿cómo copyr el valor del textbox del popup html en el portapapeles?
  • Borrar selección desplegable onclick con el button de radio
  • ¿Es posible hacer una window transparente usando HTML / JS / CSS?
  • ¿Cómo mostrar 2 dígitos de time restante ?
  • ¿Cómo detectar los elementos DOM superpuestos (rotados) dadas las coorderadas del mouse?
  • CSS: Sorprendente tachado que no funciona en la pantalla secundaria: div en bloque
  • ¿Agregar bootstrap.js a browserify?
  • Mostrar label de video html5 en colorbox lightbox
  • ¿Cómo hacer que el plugin jQuery waypoints se dispare cuando un elemento está a la vista y no se desplaza?
  • no se pueden usar cadenas en lugar de numbers integers en los charts de área en la biblioteca de charts morris
  • get un valor de textbox único de la matriz de textbox jquery / javascript
  • Rails flash aviso a través de ajax
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.