Выполнить функцию Jquery в событиях windows: загрузить, resize и прокрутить?

Как запустить функцию jquery в событиях windows: загрузка, изменение размера и прокрутка?

Вот мой код, который я пытаюсь определить, если div доступен для просмотра, а затем, если он запускает некоторый код ajax …


 function topInViewport(element) { return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height(); }   topInViewport($("#mydivname")) { // ajax code goes here } 

Вы можете использовать следующее. Все они обертывают объект window объект jQuery.

Нагрузка:

 $(window).load(function () { topInViewport($("#mydivname")) }); 

Изменение размера:

 $(window).resize(function () { topInViewport($("#mydivname")) }); 

манускрипт

 $(window).scroll(function () { topInViewport($("#mydivname")) }); 

Или привяжите их всех, используя:

 $(window).on("load resize scroll",function(e){ topInViewport($("#mydivname")) }); 

Вы можете связать слушателей с одной общей функцией –

 $(window).bind("load resize scroll",function(e){ // do stuff }); 

Или другим способом –

 $(window).bind({ load:function(){ }, resize:function(){ }, scroll:function(){ } }); 

В качестве альтернативы вместо использования .bind() вы можете использовать .on() поскольку привязка напрямую сопоставляется с on() . И возможно .bind() не будет в будущих версиях jquery.

 $(window).on({ load:function(){ }, resize:function(){ }, scroll:function(){ } }); 

просто вызовите свою функцию внутри событий.

нагрузка:

 $(document).ready(function(){ // or $(window).load(function(){ topInViewport($(mydivname)); }); 

размер:

 $(window).resize(function () { topInViewport($(mydivname)); }); 

пролистайте:

 $(window).scroll(function () { topInViewport($(mydivname)); }); 

или связывать все события в одной функции

 $(window).on("load scroll resize",function(e){