Question

感谢你抽出一些时间。

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

假设你有这个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);
}

小提琴here

Answer 2

我知道你已经接受了上面的答案，但这可以简化为只使用jquery魔术函数

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

您在上面回答说onload事件不适合您。 $（function（）{// code here}）;当dom完全就绪时会触发（不确定所有浏览器是否默认为onload事件执行此操作），因此这可能就是您遇到问题的原因。它也很方便，因为你可以在页面上多个位置调用它们并将它们合并（而不是直接设置onload，如果它在其他地方设置，它将被覆盖）

在这里小提琴：http://jsfiddle.net/5cR4G/8/

渲染div background-image之后的jQuery事件

2 个答案: