Recentemente, estou escrevendo uma estrutura JavaScript. Acabei de encapsular o evento DomContentLoaded e fiquei um pouco animado. Tomei notas sobre os princípios e problemas de compatibilidade encontrados durante o processo de desenvolvimento, para evitar esquecer em todos os lugares.
Quando escrevemos o código JS, geralmente adicionamos o evento Window.Onload, principalmente para usar o GetElementById, o getElementsByTagName e outros métodos para selecionar elementos DOM para operação após o carregamento do DOM. No entanto, o Window.load aguarda até que o DOM, o script, o CSS seja carregado, e todos os recursos na imagem ou mesmo o Iframe são acionados. Em muitos casos, a página da web tem mais fotos e é maior. Demora muito tempo para carregar a imagem e é obviamente tarde demais para executar o JS, o que geralmente afeta a experiência do usuário.
Muitas estruturas JS têm um documento.
O núcleo do document.ready é o evento DomContentLoaded. Firefox, Chrome, Opera, Safari e IE9+ podem usar addEventListener ('DOMCONTENTLOADED', FN, FALSE) para ligação de eventos. O IE6 ~ 8 não suporta o evento DomContentLoaded, portanto, o processamento de compatibilidade deve ser executado para o IE6 ~ 8.
As informações dizem que o IE6 ~ 8 pode usar o evento Document.OnreadyStateChange para ouvir se o status do documento.ReadyState é igual para concluir para determinar se o DOM foi carregado. Se um iframe estiver incorporado na página, o documento.readyState do IE6 ~ 8 aguardará até que todos os recursos no iframe sejam carregados antes de serem concluídos. Neste momento, o IFRAME se torna um grande usuário demorado. Mas após o teste, mesmo que não haja iframe na página, quando o ReadyState é igual, o evento Onload é realmente acionado em vez do evento DomContentLoaded, que é surpreendente para esse ponto.
Felizmente, o IE possui um método de doscroll único. Quando a página DOM não for carregada, um erro será relatado quando o método DOSCROLL for chamado. Por outro lado, enquanto o doscroll é chamado em intervalos até que nenhum erro seja relatado, isso significa que o DOM da página foi carregado. Este método é válido, independentemente de o conteúdo da imagem e do iframe ter sido carregado.
Se vários arquivos JS estiverem vinculados ao evento do documento.
O acima é o princípio e a edição de compatibilidade do evento Document.Ready. A seguir, é apresentado um parágrafo de código de exemplo. Para facilitar a compreensão do processo de execução, o processo de execução é gravado nos comentários usando o modo de encapsulamento da função. Se houver alguma inadequação, dê -me alguns conselhos.
A cópia do código é a seguinte:
// Salvar a fila de eventos de Domready
eventQueue = [];
// julga se o DOM foi carregado
isready = false;
// julga se Domready está vinculado
isbind = false;
/*Execute o DomReady ()
*
*@param {function}
*@Execute empurra o manipulador de eventos para a fila de eventos e liga o DOMContentLoaded
* Se o carregamento DOM tiver sido concluído, execute imediatamente
*@chamador
*/
função doméia (fn) {
if (isready) {
fn.call (janela);
}
outro{
eventQueue.push (fn);
};
bindReady ();
};
/*Domready Event Binding
*
*@param null
*@Execute os navegadores modernos se ligam ao DOMContentLoaded através do AddevListener, incluindo o IE9+
O IE6-8 determina se o DOM foi carregado por julgamento do Doscroll
*@chamador Domready ()
*/
function bindReady () {
se (nãoready) retornar;
se (isbind) retornar;
isbind = true;
if (window.addeventListener) {
document.addeventListener ('domcontentloaded', execfn, false);
}
else if (window.attachevent) {
Doscroll ();
};
};
/*Doscroll determina se o DOM do IE6-8 foi carregado.
*
*@param null
*@Execute Doscroll determina se o DOM está carregando
*@chamador BindReady ()
*/
function Doscroll () {
tentar{
document.documentElement.doscroll ('esquerda');
}
Catch (Error) {
retornar setTimeout (Doscroll, 20);
};
execfn ();
};
/*Fila de eventos de execução
*
*@param null
*@Execute Loop Execution Event Handler na fila
*@chamador BindReady ()
*/
função Execfn () {
if (! isready) {
isready = true;
for (var i = 0; i <eventQueue.length; i ++) {
eventQueue [i] .call (janela);
};
eventQueue = [];
};
};
// arquivo js 1
DOMRADE (function () {
...
});
// Arquivo JS 2
DOMRADE (function () {
...
});
// Observe que, se for carregado de forma assíncrona, não ligue o método DOMRADE, caso contrário, a função não será executada.
// porque antes do download de JS de carregamento assíncrono, o DOMCOntentLoaded foi demitido e o addEventListener não pode ser ouvido ao executar
Página de teste: Duas imagens grandes são carregadas. Onload exige que a imagem seja carregada antes que o JS possa ser executado. O DOMCONTENTLOADED só precisa esperar até que o DOM seja carregado para executar o JS. Você pode abrir o FireBug para ver o processo de carregamento. Lembre -se de limpar o cache do navegador antes de cada teste.