2

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

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

1 回答 1

7

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

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

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

于 2013-08-18T04:04:10.553 回答