Question

我正在使用jQuery waypoints插件。以下工作正常，除了在页面加载时，控制台消息在ive滚动之前被触发。停止如果我删除了应用于图像的显示块，但我需要这个以便我的网站工作。

<!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>

Answer 1

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

在HTML中为图片添加宽度+高度。
在$(window).load处理程序中创建航点，该处理程序将等待所有图像完成加载。

当图像内联时没有发生这种情况的原因是0x0 img元素位于body的行高文本框内，因此img从顶部生成一些少量像素而不是确切的顶部。

当图像显示块时，jQuery Waypoints在页面加载时触发

1 个答案: