¿Cómo se verificó la imagen de fondo (css)?

Question

que tienen la siguiente clase CSS

.bg { 
    background-image: url('bg.jpg'); 
    display: none; 
} 

que estoy aplicando en una etiqueta TD.

Mi pregunta es ¿cómo puedo decir con JavaScript/jQuery que la imagen de fondo terminó de cargarse?

Gracias.

ACTUALIZACIÓN: propiedad de visualización agregada. Dado que mi objetivo principal es alternar a la vista.

Answer 1

La única manera que conozco de hacer esto es cargar la imagen usando Javascript, y luego configurar esa imagen como el fondo.

Por ejemplo:

var bgImg = new Image(); 
bgImg.onload = function(){ 
    myDiv.style.backgroundImage = 'url(' + bgImg.src + ')'; 
}; 
bgImg.src = imageLocation; 

Answer 2

Entregue la clase a un div con visibility:hidden en la carga de la página inicial. De esta forma, ya estará en la memoria caché del navegador cuando asigne la clase a su celda de la tabla.

Answer 3

This article may help you. Sección pertinente:

// Once the document is loaded, check to see if the 
// image has loaded. 
$(
    function(){ 
     var jImg = $("img:first"); 

     // Alert the image "complete" flag using the 
     // attr() method as well as the DOM property. 
     alert(
      "attr(): " + 
      jImg.attr("complete") + "\n\n" + 

      ".complete: " + 
      jImg[ 0 ].complete + "\n\n" + 

      "getAttribute(): " + 
      jImg[ 0 ].getAttribute("complete") 
     ); 
    } 
); 

Básicamente, seleccione la imagen de fondo y verifique que esté cargada.

Answer 4

@Jamie Dixon - que no dijo lo que quería hacer nada con la imagen de fondo, sólo sé cuando está cargada ...

$(function() 
{ 
    var a = new Image; 
    a.onload = function(){ /* do whatever */ }; 
    a.src = $('body').css('background-image'); 
}); 

Answer 5

También puede proporcionar una función que simplemente reemplaza la etiqueta img por div/background para que se beneficie tanto del atributo onload como de la flexibilidad del div.

Por supuesto, puede ajustar el código que mejor se adapte a sus necesidades, pero en mi caso, también me aseguro de que se conserva el ancho o la altura para un mejor control de lo que espero.

Mi código de la siguiente manera:

<img src="imageToLoad.jpg" onload="imageLoadedTurnItAsDivBackground($(this), true, '')"> 

<style> 
.img-to-div { 
    background-size: contain; 
} 
</style> 

<script> 
// Background Image Loaded 
function imageLoadedTurnItAsDivBackground(tag, preserveHeight, appendHtml) { 

    // Make sure parameters are all ok 
    if (!tag || !tag.length) return; 
    const w = tag.width(); 
    const h = tag.height(); 

    if (!w || !h) return; 

    // Preserve height or width in addition to the image ratio 
    if (preserveHeight) { 
     const r = h/w; 
     tag.css('width', w * r); 
    } 
    else { 
     const r = w/h; 
     tag.css('height', h * r); 
    } 
    const src = tag.attr('src'); 

    // Make the img disappear (one could animate stuff) 
    tag.css('display', 'none'); 

    // Add the div, potentially adding extra HTML inside the div 
    tag.after(` 
     <div class="img-to-div" style="background-image: url(${src}); width: ${w}px; height:${h}px">${appendHtml}</div> 
    `); 

    // Finally remove the original img, turned useless now 
    tag.remove(); 
} 
</script>