javascript - 呈现 div 背景图像后的 jQuery 事件

Question

感谢您抽出宝贵时间。

我想知道是否有可能使用 jQuery 在 div 背景图像完成下载和渲染后立即触发一个函数。

假设你有这个 div

<div id="img1" class="img1"> </div>

img1 样式在哪里

.img1 {
    background-image: some_big_image.png;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;  
    display: none;
}

考虑这个javascript函数

function showDiv() {
  $("#img1").fadeIn(1000);
}

有没有办法在图像渲染后立即调用之前的函数？我所说的渲染是指调整大小以很好地适合其 div 并准备好显示。

我发现了很多关于在页面加载后或下载图像后触发功能的信息，但没有关于后期渲染的信息。

你们是最棒的。提前谢谢你。

Answer 1

尝试

var img = new Image();
img.src = "/some_big_image.png";
img.onload = function( ) {
    $("#img1").css("background-image", "url('" + img.src + "')" ).fadeIn(1000);
}

fiddle here