如何防止在向上滚动时重新加载数据？

Question

我在重新加载数据时遇到了问题，这就是我的问题:我为每个<article>制作了一个动画，显示一个预加载器。例如，您可以在下面看到，如果用户从<article>中滚动，我设置了一个条件来显示下一个620px to 640px，主要问题是当我向上滚动时，它再次加载。我该怎么办？有人能帮忙吗？

        var bodyTop = $('body').offset().top,
            bodyHeight = $('body').outerHeight(),
            windowHeight = $(window).height(),
            windowScrollTop = $(this).scrollTop(),
            desktopview = (windowHeight >= 992),
            desktop = $(window).width() >= 992 ,

        if (desktop && windowScrollTop > 620 && windowScrollTop < 640) {
            $('#dot-1').show();
            setTimeout(function(){
                $('#dot-1').hide();
                $('.scroll-1').removeClass("display-none");
            }, 3000);
        }else {}
        if (desktop && windowScrollTop > 1100 && windowScrollTop < 1110 ) {
            $('#dot-2').show();
            setTimeout(function(){
                $('#dot-2').hide();
                $('.scroll-2').removeClass("display-none");
            }, 3000);
        }else {}
        if (desktop && windowScrollTop > 1640 && windowScrollTop < 1680) {
            $('#dot-3').show();
            setTimeout(function(){
                $('#dot-3').hide();
                $('.scroll-3').removeClass("display-none");
            }, 3000);
        }else {}
        if (desktop && windowScrollTop > 2000 && windowScrollTop < 2040 ) {
            $('#dot-4').show();
            setTimeout(function(){
                $('#dot-4').hide();
                $('.scroll-4').removeClass("display-none");
            }, 3000);
        }else {}
        if (desktop && windowScrollTop > 2700 && windowScrollTop < 2740 ) {
            $('#dot-5').show();
            setTimeout(function(){
                $('#dot-5').hide();
                $('.scroll-5').removeClass("display-none");
            }, 3000);
        }else {}
        if (desktop && windowScrollTop > 3100 && windowScrollTop < 3140 ) {
            $('#dot-6').show();
            setTimeout(function(){
                $('#dot-6').hide();
                $('.scroll-6').removeClass("display-none");
            }, 3000);
        }else {}

Answer 1

首先也是最重要的，您的显示技术是不好的做法，因为它取决于屏幕的大小。

其次，您正在更改元素的可见性，您不能对此做任何事情，因为您总是在操作显示状态的元素，但是如果您想保存数据并阻止其重新加载，请将数据保存在浏览器localStorage中。

下面是一个从localStorage设置和获取数据的示例

localStorage.setItem("lastname", "Smith");
localStorage.getItem("lastname"); // the output would be Smith