Load page only when image is loaded

Question

Load page only when image is loaded, as I do using JQuery?

I tried some things but unsuccessfully so far, someone helps me...

I don’t have the only image id of the div q it is inside...

EDIT: I’m using a jquery plugin for background image, the backstrech and this background image is 2mb and it takes time to load, the code I use is this:

<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch("fundo.gif");
</script>

backstretch uses div with class backstretch

I tried from there several ways to do this guy:

<script>
$(".backstretch").load(function() {
    $("#corpo").show();
});
</script>

and this:

<script>
$("img.backstretch").load(function() {
    $("#corpo").show();
});
</script>

Answer 1

Use the image LOAD event in question

$('#IDdaImagem').on('load',function(){ 
    //'Código para carregar a página/conteúdo' 
})

Img inside a DIV

$('#IDdaDIV img').on('load',function(){ 
    //'Código para carregar a página/conteúdo' 
})

Answer 2

Try this:

    var img = document.getElementsByTagName('img')[0];        
    if (!img.complete) {
           img.src = "../imagens/sem_imagem.jpg" ;
     }

EDIT: obviously I didn’t use jquery, because it’s much easier

Answer 3

I advise you to use it this way:

<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        $('body').css('display','block');
    });
</script>

From display None on body, when the page is 100% loaded the script makes it appear, you can use those loading gifs etc.