Question

我完全坚持这个问题。

我的目标是在img位于视口内时将img更改为gif。

我使用了IsInViewport库：https://github.com/zeusdeux/isInViewport并在http://www.verticalstrategy.com/agile_strategy/上实现了以下代码（见下文）。

有人能发现为什么我的布尔值似乎不起作用，并且每次在视口中滚动时都会加载gif？

jQuery(document).ready(function ($) {

    gifset = false;

    if (gifset == false) {

        $(window).scroll(function () {

            $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?");
            $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?");
            $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?");
            $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?");

            if ($(".for-large-device .wpb_wrapper .vc_single_image-wrapper").is(':in-viewport')) {
                gifset = true;
            }

        });
    };
});

Answer 1

以下是您的代码使用自然语言执行的操作：

等待页面准备好
页面准备就绪后：
。声明gifset，将其设置为false。
。如果gifset为false [提示：总是]这样做：
..注册滚动监听器
.. ...

这里的问题是你只需在设置之后立即检查gifset变量。它永远不会在那个范围内改变。

如果将变量检查移动到滚动侦听器内部，它应该可以工作。在这里，我检查gifset是否为true并退出，否则执行以前的操作：

jQuery(document).ready(function ($) {

    gifset = false;

    $(window).scroll(function () {

        if(gifset) {
            return;
        }

        $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?");
        $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?");
        $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?");
        $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?");

        if ($(".for-large-device .wpb_wrapper .vc_single_image-wrapper").is(':in-viewport')) {
            gifset = true;
        }

    });
});

更好的解决方案是在图像源更新后取消注册侦听器，因为每次滚动都会保持导致函数调用，直到发生这种情况为止（即使它是一个短函数调用，也是不必要的开销）。 / p>

IsInViewport将img更改为gif一次

1 个答案: