Wie Hintergrund (css) Bild geladen wurde, um zu überprüfen?

Question

Ich habe die folgende CSS-Klasse

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

, dass ich auf einem TD-Tag bin anwenden.

Meine Frage ist, wie kann ich mit JavaScript / jQuery sagen, dass das Hintergrundbild fertig geladen?

Danke.

UPDATE: hinzugefügt Eigenschaft display. Da mein Hauptziel es wechseln sie in den Blick.

Answer 1

Der einzige Weg, ich weiß, dies zu tun, ist das Bild mit Javascript zu laden, und dann eingestellt, dass Bild als das backgroud.

Zum Beispiel:

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

Answer 2

Geben Sie die Klasse zu einem div mit visibility:hidden bei der ersten Seite zu laden. Auf diese Weise, wird es bereits im Browser-Cache, wenn Sie die Klasse zu Ihrer Tabellenzelle zugewiesen werden.

Answer 3

@Jamie Dixon - er hat nicht gesagt, er wollte nichts mit dem Hintergrundbild zu tun, weiß nur, wenn es geladen wird ...

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

Answer 4

Diese Artikel kann Ihnen helfen . Relevante Abschnitt:

// 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" )
        );
    }
);

Wählen Sie im Grunde das Hintergrund-Bild und machen die Prüfung zu sehen, es ist geladen.

Answer 5

Sie können auch eine Funktion zur Verfügung stellen, die einfach durch den div / Hintergrund den img-Tag ersetzt, so dass Sie beide profitieren von dem onload-Attribute und der Flexibilität des div.

Natürlich können Sie stimmen Sie den Code zu besten Ihr Bedarf, aber in meinem Fall gut, ich auch sicher, dass entweder die Breite oder die Höhe für eine bessere Kontrolle erhalten bleibt, was ich erwarte.

Ihr Code wie folgt:

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