jquery - 加载图像后使 div 可见

Question

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

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 更改为适当的id 或class。与 div 相同。

如果您的图片是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();
});