2010-09-28 2 views
4

Можно создать дубликат:
$(document).ready equivalent without jQueryКак обнаружить document.ready в JavaScript?

У меня есть рамки менее JavaScript, который выполняется при загрузке:

function myJs() {  
    // some code 
} 
window.load = myJs; 

Но это вызывает задержку в выполнении сценария , Я хочу иметь возможность выполнить этот скрипт, как только документ будет готов к обработке даже до того, как страница полностью завершит загрузку. Как это можно сделать с помощью перекрестного браузера? Другими словами, как могут:

$(document).ready(function() { 
    // 
}); 

jQuery следует указывать в простом JS?

+13

Открыть jQuery и посмотреть на .ready функцию. – Chris

ответ

5

Я сделал реализацию (на основе найденного в JQuery), которые вы можете использовать: http://github.com/jakobmattsson/onDomReady/blob/master/ondomready.js

+0

Эй, очень новый для js jere. Не могли бы вы показать, как это реализовать. Я бы сделал что-то вроде: onDomReady (function() {// code здесь}); ? – Thomas

+0

вы совершенно правы :) – Jakob

+0

Вы можете вызвать onDomReady несколько раз с различными фрагментами кода, если хотите. Все они будут исполняться по порядку. И если это еще не ясно, вы должны включить мой код, прежде чем совершать этот вызов. Кроме того, если вы хотите изменить имя функции («onDomReady»), сделайте это только в строке 10. – Jakob

-2

вы можете создать функцию, где бы вы не, то называть его в

`<body onLoad="function();">` 
-1

Поместить

function myJs() {  
    // some code 
} 

в <head></head> и

window.load = myJs; 

Непосредственно перед </body>

+1

Можете ли вы объяснить вместо меня. Может быть, я кое-что узнаю. – Shikiryu

+0

'.load' отличается от' .ready' - '.load' ждет загрузки всех изображений, скриптов, внешних ресурсов и т. Д., А' .ready' выполняется после загрузки всех ресурсов DOM (т. Е. структура HTML). Таким образом, если страница имеет как '.ready', так и' .load', '.ready' будет выполняться до' .load' –

+1

Я вижу и после размышления (и после того, как я перечитаю вопрос, что я неправильно понял), я согласен , Но, тогда, @ Джош Стодола, вместо этого дерьмового и бесполезного ответа и, во-первых, почему бы не ответить парню прямо с этим объяснением? :) Я уверен, что это цель stackoverflow, чтобы ответить и объяснить (даже если я только что зарегистрировался) – Shikiryu

1
//old IE 
document.onreadystatechange = function() { 
    if (this.readyState === "complete"){ 
     //whatev 
    } 
}; 


//for everyone else 
document.addEventListener("DOMContentLoaded", function() { 
    //whatev 
    }, false); 
+0

Единственная версия IE, которая изначально поддерживает 'DOMContentLoaded', равна 9. – MooGoo

+0

изменен на onDOMContentLoaded для более старой версии IE, спасибо за напоминание. – AutoSponge

+0

Не на 100% уверен, но довольно уверен, что IE <9 не поддерживает событие даже с 'on', перпендикулярным ему. И я думаю, вы хотели поставить «on» в функцию 'attachEvent'. – MooGoo

0

Это на самом деле не так уж плохо. Вам нужен способ добавления событий в document и знание того, что должны делать эти события. С помощью стандартной функции addEvent

function addEvent(obj, type, fn) 
{ 
if (obj.addEventListener) 
{ 
    obj.addEventListener(type, fn, false); 
} 
else if (obj.attachEvent) 
{ 
    obj["e"+type+fn] = fn; 
    obj[type+fn] = function() { return obj["e"+type+fn](window.event); }; 
    obj.attachEvent("on"+type, obj[type+fn]); 
} 
} 

Вы можете сделать следующее:

// IE 
addEvent(document, 'DOMContentLoaded', function() { 
    alert('ready'); 
}); 

// Other 
addEvent(document, 'onreadystatechange', function() { 
    if (document.readyState == 'complete') 
     alert('ready'); 
}); 

// For demonstration purposes, show a 'load' event 
addEvent(window, 'load', function() { 
    alert('load'); 
}); 

обработчик событий IE просто не будет стрелять в других браузерах, и наоборот.

+0

вы меняли IE и другие, я думаю – naugtur

0

Но это задерживает выполнение сценария. Я хочу иметь возможность выполнить этот скрипт, как только документ будет готов к работе , даже если страница полностью завершила загрузку.

Ну есть три способа приблизиться к этой проблеме:

  1. Как мало уже предложили, вы можете черпать вдохновение из исходного кода JQuery и интегрируют, что в сценарий. (Я рекомендую посмотреть Paul Irish on jQuery Source и посмотреть на JS Libs Deconstructed.
  2. Вы можете поместить вызов функции в конец тега тела, а не в тег заголовка. Это позволяет загружать все элементы DOM до начала сценария.
  3. Если вам не нужно работать с DOM вообще, вы можете просто сделать его самоисполняемой функцией, поэтому вам не нужно ничего ждать. (function startNow(){}())
Смежные вопросы