How to verify background (css) image was loaded?

前端 未结 5 1383
离开以前
离开以前 2021-02-03 22:00

I have the following CSS class that I\'m applying on a tag:

.bg {
   background-image: url(\'bg.jp         


        
相关标签:
5条回答
  • 2021-02-03 22:35

    @Jamie Dixon - he didn't say he wanted to do anything with the background image, just know when it's loaded...

    $(function( )
    {
        var a = new Image;
        a.onload = function( ){ /* do whatever */ };
        a.src = $( 'body' ).css( 'background-image' );
    });
    
    0 讨论(0)
  • 2021-02-03 22:37

    This article may help you. Relevant section:

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

    Basically select the background-image and do the check to see it's loaded.

    0 讨论(0)
  • 2021-02-03 22:39

    Give the class to a div with visibility:hidden at the initial page load. That way, it'll already be in the browser cache when you assign the class to your table cell.

    0 讨论(0)
  • 2021-02-03 22:41

    You also can provide a function that simply replaces the img tag by the div/background so that you benefit from both the onload attribute and the flexibility of the div.

    Of course, you can fine tune the code to best suits your need, but in my case, I also make sure that either the width or the height is preserved for a better control of what I expect.

    My code as follows:

    <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>
    
    0 讨论(0)
  • 2021-02-03 22:43

    The only way I know of to do this is to load the image using Javascript, and then set that image as the backgroud.

    For example:

    var bgImg = new Image();
    bgImg.onload = function(){
       myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
    };
    bgImg.src = imageLocation;
    
    0 讨论(0)
提交回复
热议问题