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

<html>
<head>
</head>
<body>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    <div id="6"></div>
</body>

Здесь я должен получить уведомление, когда будет готов div с идентификатором 3. Это событие должно запускаться перед событием document.ready, поскольку элемент будет готов до этого.

Является ли это возможным?

0
Nikhil 21 Июн 2016 в 12:38

2 ответа

Вы не можете прикрепить прослушиватель событий load к div (только к window, body, скриптам, изображениям и фреймам), но вы можете вставить свой скрипт после третий div:

<body>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <script>doSomething()</script>
    <div id="4"></div>
    <div id="5"></div>
    <div id="6"></div>
</body>

Конечно, это не гарантирует, что все элементы внутри div (изображения и т. Д.) Завершили загрузку.

3
Viktor 21 Июн 2016 в 12:43
Ага, Виктор, я согласился.
 – 
Aruna Warnasooriya
21 Июн 2016 в 12:47
Спасибо за ответ, ребята. Проблема в том, что у меня нет никакого контроля на стороне html (я не могу внедрить скрипт после div 3). У меня может быть собственный javascript, который будет импортирован в голову. Здесь у меня есть только идентификатор элемента (в данном случае 3 в качестве моего идентификатора div), я хочу ввести свой элемент сразу после того, как станет доступен div 3, и я не могу дождаться, пока dom будет готов.
 – 
Nikhil
22 Июн 2016 в 08:50
Хм, вы можете опрашивать элемент через интервал, ожидая, пока он станет доступным. var pollElementInterval = window.setInterval(function() { var $elem = $('#3'); if ($elem.length) { $elem.append('<div id="element-to-inject">'); window.clearInterval(pollElementInterval); } }, 100);
 – 
Viktor
22 Июн 2016 в 12:16

Вы можете сделать что-то вроде этого ...

JavaScript:

<script>
function myfunction(){
//my stuff;
}
</script>

HTML:

<!doctype html>
<html>
<head>
</head>
<body>
    <div id="1">A</div>
    <div id="2">B</div>
    <div id="3" >C</div>
    <script>myfunction()</script>
    <div id="4">D</div>
    <div id="5">E</div>
    <div id="6">F</div>
</body>
</html>
0
Aruna Warnasooriya 21 Июн 2016 в 12:45