IsInViewport 将 img 更改为 gif 一次

Question

我完全被这个问题困住了。

我的目标是将 img 更改为 gif，一旦 img 在视口内。

我使用了 IsInViewport 库：https://github.com/zeusdeux/isInViewport and implemented the following code on 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 是否为真并退出，否则执行之前的操作：

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;
        }

    });
});

更好的解决方案是注销侦听器，一旦更新了图像源，因为每次滚动都会一直导致函数调用直到发生这种情况（即使它是一个简短的函数调用也是不必要的开销） .

IsInViewport 将 img 更改为 gif 一次

IsInViewport change img to gif once

jquery

scroll

image

gif

viewport