jquery - 加载图像后使 div 可见

Question

在我的网站上，我的 div 中有一个 SWF，它覆盖了我的 logo png 图像。我希望这个包含 SWF 的 div 仅在使用 jQuery 加载徽标图像后出现。

overlay.php 包含 SWF 代码

<div id="overlay"><?php include "overlay.php"?></div>
<div id="logo"></div>

jQuery：

  <script type="text/javascript">
    $('#header').on('load',function(){
        $('#overlay').css("visibility","visible");
    });
    </script>

CSS：

#overlay{
    position:absolute;  
    z-index:2; 
    visibility:hidden;
}

标题

#header{
    background-image:url(logo.png); 
    background-repeat:no-repeat;
    position:relative;
    z-index:1; 
}

Answer 1

您可以添加一个监听图像加载的事件：

$('img').on('load',function(){
    $('#overlay').show();
});

当然，您需要div先将其隐藏并更改img为适当的idor class。与 相同div。

如果您的图像是 a background-image，您可以尝试以下操作：

$('<img>').attr('src',function(){
    var imgUrl = $('#header').css('background-image');
    imgUrl = imgUrl.substring(4, imgUrl.length-1);
    return imgUrl;
}).load(function(){
    $('#overlay').show();
});