Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Rúben Moutinho

Javascript depois do html

Recommended Posts

Rúben Moutinho

Bom dia, existe alguma forma prática de colocar o javascript a ler apenas depois do html?

Cumprimentos, rm

Share this post


Link to post
Share on other sites
tiago.f

Explica o que queres dizer com "ler".

Se te referes a carregar js depois do HTML basta pores as tags <script > no final do body...

Share this post


Link to post
Share on other sites
Rúben Moutinho

coloque eu onde colocar os ficheiros de script estão a carregar antes das imagens, quero criar uma ordem de carregamento, é possivel?

Share this post


Link to post
Share on other sites
HappyHippyHippo

o elemento body tem um evento chamado onload onde podes executar o teu código javascript


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Rúben Moutinho

sim neste caso está a ser por ficheiros externos, no entanto tenho o meu site dividido em sections. basicamente...

<html>
<head></head>
<body>
<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>
<section id="section4"></section>
<section id="section5"></section>
</body>
</html>

Como coloco a section 5 a carregar primeiro que as outras por exemplo?

(desde já obrigado a ambos pela ajuda :) )

Edited by Rúben Moutinho

Share this post


Link to post
Share on other sites
tiago.f

Mostra o código todo (html + javacript) por favor, para podermos ser mais específicos.....

.. senão, a resposta do HappyHippyHippo é a melhor que podes ter.

Share this post


Link to post
Share on other sites
Rúben Moutinho

A questão é essa, quero descobrir uma forma de alternar o carregamento das sections via jquery porque não tenho ideia de como o fazer.

Share this post


Link to post
Share on other sites
tiago.f

Mostra o código todo (html + javacript) por favor, para podermos ser mais específicos.....

Share this post


Link to post
Share on other sites
KTachyon

Tens que controlar quando é que as imagens acabaram de ser carregadas através de Javascript:

var image = new Image();

image.onload = function() {
   // a imagem carregou, executar código aqui
};

image.onerror = function(error) {
   // tratar o erro, caso não seja possível carregar a imagem
};

image.url = http://host/path/para/imagem;

Para controlares o carregamento de várias imagens, o ideal será utilizares uma biblioteca de promessas, tipo o Q.js, ou mesmo o defer do jQuery:

function preloadImagePromise(url) {
   var deferred = Q.defer();

   var img = new Image();

   img.onload = function () { deferred.resolve(); }
   img.onerror = function () { deferred.resolve(); }
   /* em caso de erro, a promessa é resolvida (ou seja, ignora o facto de algumas imagens poderem não ser carregadas */

   img.src = url;

   return deferred.promise;
}

var imgSources = [ /* array de endereços de imagens */ ];

Q.all(
   _.map(imgSources, function(imgSrc) {
       return preloadImagePromise(imgSrc);
   })
).then(function() {
   // todas as imagens foram carregadas, executar
});

EDIT: BTW, não precisas de te preocupar com colocar as imagens que carregas aqui no DOM. O sistema de cache dos browsers vai garantir que só irá ser feito o carregamento das imagens uma vez.

O _ onde se utiliza a função map() é o underscore.js.

Edited by KTachyon

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.