Comment vérifier arrière-plan (css) image 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 TD.

Ma question est de savoir comment puis-je savoir avec JavaScript / JQuery que l'image d'arrière-plan fini de charger?

Merci.

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

Answer 1

La seule façon que je connaisse pour ce faire est de charger l'image en utilisant Javascript, puis définir cette image comme backgroud.

Par exemple:

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

Answer 2

Donner la classe à un div avec visibility:hidden à la charge de la page initiale. De cette façon, ça va déjà dans le cache du navigateur lorsque vous attribuez la classe à votre cellule de tableau.

Answer 3

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

Cette article peut vous aider . 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 Fondamentalement, le background-image et faire la vérification pour voir qu'il est chargé.

Answer 5

Vous pouvez également fournir une fonction qui remplace simplement la balise img par la div / arrière-plan afin que vous bénéficiez à la fois l'attribut onload et la flexibilité de la div.

Bien sûr, vous pouvez régler le code convient le mieux à vos besoins, mais dans mon cas, je également vous assurer que la largeur ou la hauteur est préservée pour un meilleur contrôle de ce que je pense.

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>