gpt4 book ai didi

jquery-waypoints - 当图像显示 block 时,jQuery Waypoints 在页面加载时触发

转载 作者:行者123 更新时间:2023-12-04 18:23:30 28 4
gpt4 key购买 nike

我正在使用 jQuery 航路点插件。以下内容工作正常,除了在页面加载时控制台消息在我滚动之前被触发。如果我删除应用于图像的显示 block ,这将停止,但我的网站需要它才能工作。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/waypoints.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
display: block;
margin: auto;
}
#img3 {
opacity: 0.5;
}

</style>
<script>
$(document).ready(function() {
$('#img3').waypoint(function() {
console.log('Basic example callback triggered.');
});
});
</script>
<body>
<img src="images/1.jpg" alt="image 1" id="img1">
<img src="images/2.jpg" alt="image 2" id="img2">
<img src="images/3.jpg" alt="image 3" id="img3">
<img src="images/4.jpg" alt="image 4" id="img4">
</body>
</html>

最佳答案

您的图片在开始加载之前没有宽度/高度。在 domready 事件期间,在您的图像开始加载之前,您正在实例化航路点。那时,因为它们没有宽度/高度,所以您所有的图像都位于页面上的 y 坐标 0 处,这就是路点触发的地方。您至少可以通过两种方式解决此问题:

  • 在您的 HTML 中为您的图片指定宽度和高度。
  • $(window).load 处理程序中创建路径点,该处理程序将等待所有图像完成加载。

当图像是内联时没有发生这种情况的原因是 0x0 img 元素位于 body 的 line-height 文本框内,因此 img 距离顶部有一些小像素而不是确切的顶部。

关于jquery-waypoints - 当图像显示 block 时,jQuery Waypoints 在页面加载时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18104033/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com