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)

  • Error misterioso de jQuery.each () y Underscore.each () en iOS
  • Mover el iframe de youtube embedded en dom con jquery hace que la pantalla completa no funcione en Windows8 IE10
  • Semántica-UI Dynamic Dropdown
  • ¿Puedo tener una function recursiva de JavaScript dentro de una function $ .getJSON?
  • ¿Por qué recibo este error: "TypeError no detectado: no se puede leer la propiedad 'Título' de indefinido"?
  • Dropdown Javascript error: el object no admite la propiedad o el método 'coincidencias'
  • no puede acceder a la variable en otra function dentro del object literal
  • ¿Por qué no podemos usar un bucle for para crear una animation?
  • ¿Cómo evitar la duplicación de tags?
  • Función de mouseover JQuery disparando varias veces
  • jQuery: encuentre el <optgroup> para un valor seleccionado en un elemento <select>
  • cómo hacer que los paneles cambien automáticamente
  • ¿Cuáles son algunas razones técnicas empíricas para no usar jQuery?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.