Make div visible after image is loaded

Question

On my website, I have an SWF inside a div that overlays my logo png image. I want this div that contains the SWF to appear only after the logo image is loaded using jQuery.

overlay.php includes the SWF code

<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

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

The CSS properties `visibility` and `display` do different things - http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone. Are you sure you don't want `display` here? — Russ Cam, Aug 14 '13 at 16:15

putvande · Answer 1 · 2013-08-14T16:20:55.727

2

You can add an event that listens to the load of the image:

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

Of course you need to hide that div first and change img to the appropriate id or class. Same with div.

If your image is a background-image you can try this:

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

edited Aug 14 '13 at 16:20

answered Aug 14 '13 at 16:02

putvande

15,068
3
34
50

Just edited my first post using your code but it doesn't seem to work, what am I doing wrong? – Tasos Aug 14 '13 at 16:11
`#header` is your image (`img` tag)? – putvande Aug 14 '13 at 16:12
#header is the div that the logo is loaded into using css(background-image), sorry for not mentioning that I used background-image, does it matter though, script wise? – Tasos Aug 14 '13 at 16:13
Ah. I don't think you can do it that way. At least not with the `load` function. – putvande Aug 14 '13 at 16:14
How about making it visible when the whole document loads instead of the logo? would that work? edit: your new code didn't work for me. – Tasos Aug 14 '13 at 16:21
This works, but a solution to target the background-image div would be appreciated: `jQuery(window).load(function () { $('#overlay').css("visibility","visible"); });` – Tasos Aug 14 '13 at 16:28

Make div visible after image is loaded

1 Answers1