Comment vérifier que l'image de fond (css) a été chargée?

Question

J'ai la classe CSS suivant

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

que j'application sur une étiquette de TD.

Ma question est comment puis-je dire avec JavaScript/jQuery que l'image de fond a fini de se charger?

Merci.

MISE À JOUR: ajout d'une propriété d'affichage. Depuis mon objectif principal, il bascule en vue.

Answer 1

Le seul moyen que je connaisse pour le faire est de charger l'image en utilisant Javascript, puis de définir cette image comme arrière-plan.

Par exemple:

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

Answer 2

Attribuez la classe à une div avec visibility:hidden lors du chargement de la page initiale. De cette façon, il sera déjà dans le cache du navigateur lorsque vous affectez la classe à votre cellule de tableau.

Answer 3

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

Sélectionnez essentiellement l'image de fond et vérifiez qu'elle est chargée.

Answer 4

@Jamie Dixon - il n'a pas dit qu'il voulait faire quoi que ce soit avec l'image d'arrière-plan, il suffit de savoir quand il est chargé ...

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

Answer 5

Vous pouvez également fournir une fonction qui remplace simplement la balise img par le div/background afin que vous bénéficiez à la fois de l'attribut onload et de la flexibilité du div. Bien sûr, vous pouvez affiner le code pour répondre au mieux à vos besoins, mais dans mon cas, je m'assure également que la largeur ou la hauteur est préservée pour un meilleur contrôle de ce que j'attends.

Mon code comme suit:

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