Come è stato caricato l'immagine di sfondo (css)?

Question

Ho la seguente classe CSS

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

che sto applicando su un tag TD.

La mia domanda è: come posso dire con JavaScript/jQuery che l'immagine di sfondo è stata caricata?

Grazie.

UPDATE: aggiunta visualizzazione proprietà. Dato che il mio obiettivo principale è quello di renderlo visibile.

Answer 1

L'unico modo che conosco per eseguire questa operazione è caricare l'immagine utilizzando Javascript, quindi impostare l'immagine come sfondo.

Ad esempio:

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

Answer 2

Assegnare la classe a un div con visibility:hidden al caricamento iniziale della pagina. In questo modo, sarà già nella cache del browser quando assegni la classe alla cella della tabella.

Answer 3

This article may help you. Parte 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") 
     ); 
    } 
); 

Fondamentalmente selezionare l'immagine di sfondo ed eseguire il controllo per vederlo caricato.

Answer 4

@Jamie Dixon - non ha detto che voleva fare qualcosa l'immagine di sfondo con, è sufficiente sapere quando è caricato ...

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

Answer 5

È inoltre in grado di fornire una funzione che sostituisce semplicemente il tag img dal div/background in modo da beneficiare sia dell'attributo onload che della flessibilità del div.

Naturalmente, è possibile perfezionare il codice per adattarlo al meglio alle proprie esigenze, ma nel mio caso, mi assicuro anche che la larghezza o l'altezza siano preservate per un migliore controllo di ciò che mi aspetto.

mio codice come segue:

<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>