atrasando o carregamento de uma imagem de fundo css certa

Question

em um CSS como este:

...
#big-menu {
    background: #fff url(../images/big-menu.jpg) no-repeat;
}
#some-menu {
    background: #fff url(../images/some-menu.jpg) no-repeat;
}
#some-other-menu {
    background: #fff url(../images/some-other-menu.jpg) no-repeat;
}
...

Existe uma maneira de atrasar o carregamento da imagem de fundo do #big-menu, para que ele carrega depois de tudo o resto, incluindo todas as imagens no HTML, e todos os outros de fundo CSS (o some-menu e some-other-menu).

A razão é, big-menu.jpg é muito pesado em tamanho, e eu quero que ele seja carregado passado. Afinal, ele só serve como um olho-doce, e há outras imagens de fundo que têm um uso melhor do que isso. (Tais como os usados ??em botões)

Será que o fim de colocá-lo em CSS ou as ocorrências do markup (#big-menu) em HTML tem nada a ver com o que é carregado em primeiro lugar? ou se existe uma maneira mais confiável para controlá-lo? javascript (jQuery preferido) é bom.

Answer 1

A ordenação em css não controla quais recursos são carregados em primeiro lugar, mas não afeta o estilo existente está sendo substituído ou herdado.

Tente o JavaScript onLoad evento. Os executa evento somente após o carregamento da página de chegada.

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

Answer 2

Isto pode não ser uma solução perfeita (pois é um css-fundo e não uma imagem), mas YUI loader imagem fornece uma boa maneira de imagens carregamento lento.

Criar um grupo

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

Depois que o documento for carregado, a imagem irá carregar 2 segundos depois. Consulte Yahoo! Brilho ou os href="http://developer.yahoo.com/yui/examples/imageloader/index.html" rel="nofollow noreferrer"> exemplos para demonstração.

Answer 3

Outra solução é dividir seus ativos em diferentes domínios, navegadores só irá solicitar dois ativos no momento, em seguida, esperar por um para ser carregado antes de iniciar o próximo. Você pode observar isso com Firebug e YSlow , então colocar alguns ativos em images.example.com e images1.example.com e ver se isso faz um impacto

Answer 4

Eu não acho que a colocação no styelsheet irá afetá-la, como a ordem dos elementos a que são aplicados irá decidir qual imagem será carregado pela primeira vez.

Você pode usar jQuery para carregar as imagens na seqüência correta, embora

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

EDIT: Ok, então talvez em vez de adicionar uma classe, uma melhor solução seria adicionar fundo-imagens em tempo de execução.

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");

Answer 5

Controlar quando uma imagem cargas em CSS não é realmente possível. Você poderia tentar colocá-lo na parte inferior de sua folha de estilo, mas eu duvido que você vai ver uma melhoria.

Answer 6

A ordem de transferência não pode ser controlado usando css. No entanto, você pode usar javascript para alcançar este objectivo.

Apesar de não ser diretamente relacionado com a questão talvez antes de fazer isso você deve optmize a imagem usando smush.it ou o seu programa de imagem favorito Acho que jpegs olhar muito bom quando salvo com qualidade de 85%. Experimentar e não se esqueça de definir o seu servidor web para imagens de cache por longos períodos e, em seguida, o problema só vai ser a primeira vez seus usuários ir para o site.

Answer 7

truque Javascript de Jason trabalhou para mim na resolução deste problema. No entanto, eu tive que corrigir a sintaxe um pouco:

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();