JQuery.ready() эквивалентный прослушиватель событий на элементах?

Я использую jQuery JavaScript library. Мне нравится прослушиватель событий готов на $(document), который запускается, когда DOM настроен.

(Довольно похоже на .onload)

Я нашел бы это очень полезным, если бы был прослушиватель событий, который очень похож на него, но срабатывает, когда элемент полностью загружен. (f.e.: Изображение, a Div, такое)

Я бы оценил как jQuery, так и методы JavaScript.

Ответ 1

Событие не запускается, когда будет готов произвольный элемент DOM, такой как <div>. У изображений есть свое собственное событие load, чтобы рассказать вам, когда данные изображения были загружены и отображены, а некоторые другие специальные типы элементов имеют событие. Но регулярные элементы DOM не имеют такого события.

Если вы хотите, чтобы код javascript выполнялся, как только готовый элемент DOM был готов, единственный способ сделать это - поместить вызов функции в встроенный script сразу после этого элемента DOM. В этот момент элемент DOM будет готов, но остальная часть DOM впоследствии может быть еще не готова. В противном случае script может быть помещен в конце документа, или script может быть запущен, когда весь документ готов.

Вот существующие события нагрузки, выраженные в форме jQuery (все это можно сделать и в простом JS):

// when a particular image has finished loading the image data
$("#myImage").load(fn);

// when all elements in the document are loaded and ready for manipulation
$(document).ready(fn);

// when the DOM and all dynamically loaded resources such as images are ready
$(window).load(fn);

В jQuery вы также можете динамически загружать контент и получать уведомления, когда это содержимое было загружено с помощью метода .load(), например:

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

Внутренне это просто делает вызов ajax для извлечения данных, а затем вызывает обратный вызов после того, как данные были получены ajax и затем вставлены в документ. Это не родное событие.

Если у вас есть код, который динамически загружает элементы в DOM и вы хотите знать, когда присутствуют эти элементы DOM, лучший способ узнать, когда они будут готовы, - это иметь код, который добавляет их в DOM создайте какое-то событие, чтобы рассказать вам, когда оно будет готово. Это предотвращает попытки тратить деньги на опрос, пытаясь выяснить, находится ли элемент в DOM.

Также можно использовать DOM MutationObserver, чтобы увидеть, когда в DOM были внесены конкретные типы изменений.

Ответ 2

Все элементы (включая div и img) готовы, как только DOMReady срабатывает - что это значит.

Однако вы можете использовать событие load() для запуска некоторого кода, когда тэг img полностью загрузил в него изображение src:

$('img').load(function() {
   console.log('image loaded');
});

Ответ 3

jQuery не имеет его, но мы можем создать наш собственный onDomElementIsReady, Tools: jQuery, ES6, Promise и Interval (я ленив, но вы можете получить идею)

Мы будем ждать, пока элемент не будет существовать в DOM, и как только он будет доступен, мы разрешим результат Promise.

  const onDomElementIsReady = (elementToWatch)=> {
    //create promise
    return new Promise((res, rej)=> {
      let idInterval = setInterval(()=> {
        //keep waiting until the element exist
        if($(elementToWatch).length > 0) {
          clearInterval(idInterval); //remove the interval
          res($(elementToWatch)); //resolve the promise             
        }
      },100);
    });
  };


//how to use it?
onDomElementIsReady(".myElement").then(element => { 
                          //use jQuery element
                   });

ПРИМЕЧАНИЕ. Чтобы улучшить это, мы должны добавить таймер, чтобы reject обещание, если элемент DOM никогда не существует.