1

Bem, tenho uma página html com uma imagem de fundo, só que quando a página carrega, ela aparece de uma forma esquisita. Tem como ela carregar suavemente na página? Estou usando um código que altera a imagem a cada reload da página.

<script> 
var fundos = 20; 
ran = Math.round(Math.random() * (fundos-1))+1 
if (ran == (1)) { 
url_background=("img/1.png"); 
} 
if (ran == (2)) { 
url_background=("img/2.png") 
} 
if (ran == (3)) { 
url_background=("img/3.png"); 
} 
if (ran == (4)) { 
url_background=("img/4.png") 
} 
if (ran == (5)) { 
url_background=("img/5.png"); 
} 
if (ran == (6)) { 
url_background=("img/6.png") 
} 
if (ran == (7)) { 
url_background=("img/7.png"); 
} 
if (ran == (8)) { 
url_background=("img/8.png") 
}
if (ran == (9)) { 
url_background=("img/9.png"); 
} 
if (ran == (10)) { 
url_background=("img/10.png"); 
} 
if (ran == (11)) { 
url_background=("img/11.png") 
}
if (ran == (12)) { 
url_background=("img/12.png"); 
} 
if (ran == (13)) { 
url_background=("img/13.png") 
}
if (ran == (14)) { 
url_background=("img/14.png") 
}
if (ran == (15)) { 
url_background=("img/15.png"); 
} 
if (ran == (16)) { 
url_background=("img/16.png") 
}
if (ran == (17)) { 
url_background=("img/17.png"); 
} 
if (ran == (18)) { 
url_background=("img/18.png") 
}
if (ran == (19)) { 
url_background=("img/19.png"); 
} 
if (ran == (20)) { 
url_background=("img/20.png") 
}
</script>
0

2 Respostas 2

0

Para carregar a imagem e só mostrar quando já estiver em memória:

var fundos = 20;
var ran = Math.round(Math.random() * (fundos - 1)) + 1
var url_background = "img/" + ran + ".png";

function carrega() {
    $('<img/>').attr('src', 'http://picture.de/image.png').load(function () {
        $(this).remove(); // para libertar memória e evitar fugas de memória
        $('body').css('background-image', 'url(' + url_background + ')');
    });
    $('.main').fadeIn('slow');
}

A ideia é: crie um novo elemento que nunca vai usar mas com o endereço da imagem que quer. Usando o .load() pode saber quando a imagem está carregada e aí pode aplicar essa imagem ao body pois ela já está carregada na memória.

fonte

Para fazer um fade in na imagem pode fazer com CSS:

body {
    -webkit-transition: background-image 0.2s ease-in-out;
    -moz-transition: background-image 0.2s ease-in-out;
    -ms-transition: background-image 0.2s ease-in-out;
    -o-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

Dessa maneira quando o jQuery aplicar $('body').css('background-image', 'url(http://picture.de/image.png)'); a imagem de fundo vai fazer uma transição de 0.2 segundos.

4
  • Vou tentar.....
    – user18359
    26/11/2014 às 14:35
  • Não funcionou, tirei o código que muda o background com o reload, mas não deu certo.
    – user18359
    26/11/2014 às 14:42
  • @GustavoBarbosa tem o jQuery carregado?
    – Sergio
    26/11/2014 às 14:47
  • Desculpe a demora. Sim. <script src="./js/jquery.js"></script>
    – user18359
    26/11/2014 às 14:56
0

Olá, você pode definir o background em um elemento fora do conteúdo, exemplo:

<div class="meuBackground"><section><p>Seu conteudo aqui</p></section></div>

Definir as camadas na css:

div {
    z-index:0;
}

section { 
    z-index:1; 
}

E com javascript controlar o background e o aparecimento com opacity:

div {
  opactity:0;
}

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