我在我的网站上使用jQuery，我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div，并有一定的代码运行时，他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
当前回答
没有本地事件你可以挂钩到这个，但是你可以触发一个事件从你的脚本后，你已经使div可见使用.trigger函数
e.g
//declare event to run when div is visible
function isVisible(){
//do something
}
//hookup the event
$('#someDivId').bind('isVisible', isVisible);
//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
$(this).trigger('isVisible');
});
其他回答
没有本地事件你可以挂钩到这个，但是你可以触发一个事件从你的脚本后，你已经使div可见使用.trigger函数
e.g
//declare event to run when div is visible
function isVisible(){
//do something
}
//hookup the event
$('#someDivId').bind('isVisible', isVisible);
//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
$(this).trigger('isVisible');
});
Redsquare的解决方案是正确的答案。
但是作为一个IN-THEORY解决方案，你可以编写一个函数来选择由.visibilityCheck(不是所有可见元素)分类的元素，并检查它们的可见性属性值;如果是这样，那就做点什么。
之后，应该使用setInterval()函数定期执行该函数。您可以在成功调用时使用clearInterval()停止计时器。
这里有一个例子:
function foo() {
$('.visibilityCheck').each(function() {
if ($(this).is(':visible')){
// do something
}
});
}
window.setInterval(foo, 100);
您还可以对其执行一些性能改进，但是，该解决方案基本上不适合实际使用。所以…
下面的代码(来自http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/)将使您能够使用$('#someDiv')。(“秀”,someFunc);。
(function ($) {
$.each(['show', 'hide'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.trigger(ev);
return el.apply(this, arguments);
};
});
})(jQuery);
你总是可以添加到原始的.show()方法中，这样你就不必每次显示一些东西时都触发事件，或者如果你需要它与遗留代码一起工作:
Jquery扩展:
jQuery(function($) {
var _oldShow = $.fn.show;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function() {
var obj = $(this),
newCallback = function() {
if ($.isFunction(oldCallback)) {
oldCallback.apply(obj);
}
obj.trigger('afterShow');
};
// you can trigger a before show if you want
obj.trigger('beforeShow');
// now use the old function to show the element passing the new callback
_oldShow.apply(obj, [speed, newCallback]);
});
}
});
使用的例子:
jQuery(function($) {
$('#test')
.bind('beforeShow', function() {
alert('beforeShow');
})
.bind('afterShow', function() {
alert('afterShow');
})
.show(1000, function() {
alert('in show callback');
})
.show();
});
这可以有效地让您在执行原始.show()方法的正常行为的同时执行beforeShow和afterShow操作。
您还可以创建另一个方法，这样就不必重写原来的.show()方法。
在这里帮助我的是最近的ResizeObserver规格polyfill:
const divEl = $('#section60');
const ro = new ResizeObserver(() => {
if (divEl.is(':visible')) {
console.log("it's visible now!");
}
});
ro.observe(divEl[0]);
注意，它是跨浏览器和性能的(没有轮询)。
