如何验证背景（css）图像已加载？

Question

我在 标记上应用了以下 CSS 类：

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

如何使用 JavaScript/jQuery 判断背景图像已完成加载？

Answer 1

我知道执行此操作的唯一方法是使用 Javascript 加载图像，然后将该图像设置为背景。

例如：

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

Answer 2

在初始页面加载时将该类赋予具有 visibility:hidden 的 div。这样，当您将类分配给表格单元格时，它就已经在浏览器缓存中了。

Answer 3

@Jamie Dixon - 他没有说他想对背景图像做任何事情，只是知道它何时加载......

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

Answer 4

本文可能有所帮助你。相关部分：

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

基本上选择背景图像并检查它是否已加载。

Answer 5

onload 的一个问题是它会在数据准备好时触发，而不是在渲染完成时触发。

对于一个项目，我加载了一堆中型大图像。当图像加载时，人们会以一种碎片的方式获得图像“突然出现”的效果。

通过使用 onload 和 解码。

至于问题：“我如何知道背景图像已完成加载？”。它可以有多种解释；但如果人们正在寻找完成的渲染，这就是对这个问题的攻击。

简化：

---

img.onload = () => {
    some_elm.style.backgroundImage = 'url(' + some_src + ')';
    img.decode().then(some_function).catch(some_function);
}
img.onerror = some_function;
img.src = some_src;

其中 some_function 只是检查所有加载图像的计数器，但当然也可以用于一个图像。

我猜很可能是 decode() 的开销导致它流动良好，但效果很好。

发现它对于加载 元素（仅使用 decode）和背景（onload + 解码）。

---

然后，人们可以做任何事情，从简单地向包装器添加一个类或添加一些奇特的效果 - 例如以有序的方式逐个图像淡入淡出等。

另请注意 decode() 的浏览器兼容性。

Answer 6

您还可以提供一个函数，只需用 div/background 替换 img 标签，这样您就可以从 onload 属性和 div 的灵活性中受益。

当然，您可以微调代码以最适合您的需要，但就我而言，我还确保保留宽度或高度，以便更好地控制我的期望。

我的代码如下：

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