jQuery: DOCUMENTO PRONTO incêndios muito cedo para minhas necessidades

Question

Estou desenvolvendo um site baseado todas as fotos ao redor. Algumas áreas deste site requerem cálculos baseados em dimensões de imagem, a fim de funcionar corretamente. O que eu encontrei é que documento pronto está a disparar muito cedo e meu gui está se comportando de forma irregular como resultado.

Eu removi a função pronta documento e substituiu-o com o 'ol window.onload função boa, uma vez que, se eu ler corretamente, esta função não faz fogo até que as imagens são totalmente carregado.

A minha pergunta é, isso vai causar algum problema? E existem outras soluções que eu tenha perdido, talvez?

Obrigado pela ajuda caras !!

Answer 1

Não há nenhuma razão você não pode usar $(window).load() em oposição a $(document.ready(). Você está correto sobre a função não disparar até que as imagens são totalmente carregado (ou deixou de carga).

A desvantagem totalmente confiando em $(window).load() são de que, em alguns casos, é facilmente perceptível nenhum de seu javascript está trabalhando (ou seja, Navegação ou clique em eventos ) até que cada item único em sua página foi carregada. Alguns usuários, geralmente os usuários de energia de um site, clique através de páginas muito rapidamente e isso prejudica a experiência geral do usuário.

O meio termo seria $(window).ready() uso para a maioria das situações e eventos só colocar dentro $(window).load() que absolutamente obrigá-los .

Answer 2

Tente isto em vez disso:

$(window).load(function() {
 alert("images are loaded!");
});

Veja este link para uma comparação de $(document).ready() e $(window).load()

http://4loc.wordpress.com/2009/04 / 28 / documentready-vs-windowload /

Answer 3

Altough window.onload iria atender às suas necessidades, eu recomendo acelerar as coisas um pouco:

$("img.load").load(function(){
    alert($(this).width());
});

Agora você pode processar a imagem individualmente tão rapidamente como ele é carregado e não à espera de todo o conjunto de elementos.

Answer 4

Aqui está uma solução muito simples:

Incluir os atributos width="" e height="" para todas as imagens. Isto irá forçar o navegador para renderizar tudo corretamente e no lugar antes mesmo de imagens são carregadas. O espaço necessário para cada imagem em imóveis da página será devidamente posta de lado enquanto imagens são carregadas.

É isso aí!

Se você fizer isso, document.ready vai funcionar muito bem no seu cenário. O que está acontecendo é que o navegador não sabe o tamanho das imagens antes de serem recuperados / carregado, para que o navegador tem de adivinhar. Isso pode causar o comportamento engraçado. Especificando a largura ea altura de suas imagens vai resolver esse problema.

Estou surpreso que ninguém mencionou isso. Não é necessariamente um problema javascript, embora de cballou resposta é definitivamente um bom conselho.

De qualquer forma, espero que você aprendeu algo novo. ;)

Answer 5

Você poderia possível uso do load() evento em jQuery , no entanto, a documentação é mencionado que não pode funcionar como esperado se o elemento já carregado.

Nota: carga só funcionará se você configurá-lo antes do elemento foi completamente carregado, se você configurá-lo depois de que nada vai acontecer. Isso não acontece em $ (document) .ready (), que lida com jQuery-lo a funcionar como esperado, também quando defini-lo após o DOM foi carregado. - http://docs.jquery.com/Events/load

Answer 6

Se você quiser atrasar-lo com uma quantidade de tempo dada talvez você pode usar "setTimeout":)