3

Carregar página só quando imagem tal for carregada, como faço isso utilizando JQuery?

Tentei algumas coisas mas sem sucesso até agora, alguém me ajuda...

eu não tenho o id da imagem só o da div q ela tá dentro...

EDIT: Eu to usando um plugin jquery para imagem de fundo, o backstrech e essa imagem de fundo tem 2mb e demora pra carregar, o código que eu uso é esse:

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

o backstretch usa a div com class backstretch

tentei dai várias formas de fazer isso tipo:

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

e isso:

<script>
$("img.backstretch").load(function() {
    $("#corpo").show();
});
</script>
6
  • informe mais um menos como que é o trecho do seu html aqui para ficar mais fácil lhe ajudarmos 7/04/2014 às 0:25
  • coloquei mais informações Rogerio, espero que ajude...
    – Alan PS
    7/04/2014 às 0:30
  • Faz o seguinte, verifique se não tem nenhum erro acontecendo no seu javascript que esteja interrompendo a execução do mesmo. Depois coloque um alert dentro das funções load e veja se elas estao sendo chamadas. De quebra por fim faça um teste e chame pela função $('#corpo').show(); e veja se o resultado é o esperado. 7/04/2014 às 0:34
  • na verdade não é erro no script, simplesmente ele funciona mas a imagem carrega depois de qualquer maneira...
    – Alan PS
    7/04/2014 às 0:38
  • Seguinte, coloque no seu CSS, informando que a imagem e o #corpo começam invisiveis (display:none / visibility:hidden). Coloque um HTML resumido da pagina pra eu entender melhor :). 7/04/2014 às 0:42

3 Respostas 3

2

Utilize o evento LOAD da imagem em questao

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

Img dentro de uma DIV

$('#IDdaDIV img').on('load',function(){ 
    //'Código para carregar a página/conteúdo' 
})
2
  • eu não tenho o id da imagem só o da div q ela tá dentro...
    – Alan PS
    7/04/2014 às 0:09
  • @user3230262 sem problema, voce pode informar pelo elemento imagem dentro da div X. 7/04/2014 às 0:10
0

Eu aconselho você usar dessa forma:

<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>

De display none no body, quando a pagina for 100% carregada o script faz com que ela apareça, você pode usar aqueles gifs de loading etc.

5
  • mas a página carrega e a imagem não
    – Alan PS
    7/04/2014 às 0:22
  • a imagem que eu preciso tem 2mb e nunca dá certo esse esquema do preloading
    – Alan PS
    7/04/2014 às 0:25
  • hmm, ja tentou usar bibliotecas de resize? pode te ajudar de alguma maneira, se não sua pagina vai demorar a ser carregada pelo visto
    – Dexxtz
    7/04/2014 às 0:30
  • é um gif animado de 2mb, quais bibliotecas de resize ?
    – Alan PS
    7/04/2014 às 0:33
  • O google tem uma, da uma pesquisada, eu desenvolvo em magento to por fora das bibliotecas, o proprio magento ja tem a dele, ele pega uma imagem pesada e redmensiona para o tamanho que eu quero, gerando uma nova imagem em cache tornando bem mais rapido o carregamento da imagem
    – Dexxtz
    7/04/2014 às 0:36
0

Tente isso:

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

EDIT: obviamente não usei jquery, até porque é muito mais fácil

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .