IsInViewport 将 img 更改为 gif 一次答案

【问题标题】：IsInViewport change img to gif onceIsInViewport 将 img 更改为 gif 一次
【发布时间】：2017-05-13 05:32:35
【问题描述】：

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

我的目标是在 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;
            }

        });
    };
});

【问题讨论】：

在您的实时链接上，控制台显示missing ) after argument list - Agile.js:25 和jQuery(...).live is not a function - (index):2072

标签： jquery image scroll viewport gif

【解决方案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;
        }

    });
});

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

【讨论】：