谁能明白为什么这个 html 代码不起作用。
当图像变得可见时，它应该显示警报，当图像对用户不可见时，它应该再次显示警报。
它也不适用于本地库。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/morr/jquery.appear/master/jquery.appear.js"></script>
<script>
var intervals = [];
$("[id^=light]").on('appear', function(event, $all_appeared_elements) {
alert("appeared");
});
$("[id^=light]").on('disappear', function(event, $all_disappeared_elements) {
alert("disappeared");
});
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" align="center" id="LichtStatus" style="height:10vh">
</body>
</html>
最佳答案
尝试这样。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js"></script>
<script>
$(function(){
$("#LichtStatus").on('appear',function() {
alert("appeared");
});
$("#LichtStatus").on('disappear', function() {
alert("disappeared");
});
$("#LichtStatus").appear();
});
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" align="center" id="LichtStatus" style="height:10vh">
</body>
</html>
检查 plunker 的工作示例
https://plnkr.co/edit/YbBNxsWNFc4vP3OEBeCm
一旦您向下滚动且图像进入视口(viewport)内，警报就会触发；向上滚动时，当图像离开视口(viewport)时警报就会触发
关于javascript - jQuery.appear 根本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40633948/