jquery - 带有 jquery load() 函数的非常困难的脚本不想正常工作

问题描述

我被 jquery 加载功能卡住了。我想做一个无限滚动页面，从其他页面加载内容。但是当我滚动时， jquery load(); 函数只正确执行一次。在某个触发滚动点，它会从下一页加载内容。但是当我滚动到下一个加载内容的触发点时，它只会在每个滚动事件上加载新内容，因此它每毫秒加载下一个内容。我只是无法弄清楚问题出在哪里以及如何使其正常工作。也许我的问题是noobie，但我真的无法在任何地方找到解决方案。提前致谢！

这是我正在处理的页面的链接：http: //viimiracula.ru/russian/aboutnew/about.htm

这是脚本：

$( window ).load(function() {

$.ajaxSetup ({ // 禁用 AJAX 响应缓存缓存：false });

    //VARS

    var currentcontentid = parseInt($("div.content").attr('id').replace(/content/, '')),
        nextcontentid = parseInt(currentcontentid) + 1,
        previouscontentid = parseInt(currentcontentid) - 1,
        currentContent = $('#content' + currentcontentid),
        nextContent = $('#content' + nextcontentid),      
        $window = $(window),
        fired = 0;
    var pages = ['about.htm','architectural-concrete.htm','artists.htm','calculate-production.htm','classifier1.htm','classifier2.htm','decorative-concrete.htm','learnsculpture.htm','manufacturing-technology.htm','service.htm','technical-characteristics.htm','tips-to-new-customers1.htm','tips-to-new-customers2.htm'];
    var nextpageurl = pages[nextcontentid];
    var contentOffset = $('#content' + currentcontentid).offset().top;       
    var contentHeight = $('#content' + currentcontentid).height();
    var windowHeight = $window.height();
    var triggerHeight = contentOffset + contentHeight - windowHeight;
    var marginOldContent = contentOffset + contentHeight;

    var fired = 0;

    //Loaded content margin

    $('.content').css('height', windowHeight);       
    $('head').append('<style>#content' + nextcontentid + '{margin-top:' + windowHeight + 'px;}</style>');

    //Load on scroll function

    $(window).on('scroll',function() {

        var scroll = $window.scrollTop();
        var triggerHeight = contentOffset + contentHeight - windowHeight;

        $('.scroll3').html(scroll);
        $('.scroll2').html(triggerHeight);


        if (scroll >= triggerHeight){
            var urlPath =  "/russian/aboutnew/" + nextpageurl;
            $("body").append('<div class="content" id="content' + nextcontentid + '"></div>');
            $("#content" + nextcontentid).load("/russian/aboutnew/" + nextpageurl + " .content");

            $('#content' + currentcontentid).css('margin-top', - marginOldContent);
            $('#content' + currentcontentid).css('position', 'fixed');


            //Previous content fade out

            var header = $('#content' + currentcontentid);
            var range = 200;

            $(window).on('scroll', function () {                  
                var scrollTop = $(this).scrollTop(),
                    height = header.outerHeight(),
                    offset = height / 2,
                    calc = 1 - (scrollTop - offset + range) / range;
                header.css({ 'opacity': calc });

              if (calc > '1') {
                header.css({ 'opacity': 1 });
              } else if ( calc < '0' ) {
                header.css({ 'opacity': 0 });
              }

            }); 

            //Changing URL              

            window.history.pushState("object or string", "Title", urlPath);

            //Changing Title

            $.ajax({
                url: urlPath,
                dataType: 'html',
                success: function(html) {
                $('.scroll').text(html);
                var title = $('.scroll').text($(html).filter('title').text());                    
                document.title = $('.scroll').html();
                }       
            });  


            currentcontentid = currentcontentid + 1;
            nextcontentid = nextcontentid + 1;
            nextpageurl = pages[nextcontentid];
            contentOffset = $('#content' + currentcontentid).offset().top;
            contentHeight = $('#content' + currentcontentid).outerHeight( true );
            windowHeight = $window.height();
            triggerHeight = contentOffset + contentHeight ;

            $('.scroll3').html(scroll);
            $('.scroll2').html(triggerHeight);

        };

    /*if ($window.scrollTop() >= menudistance - 70) {
        $('.submenupage2').css('position','fixed');
        $('.submenupage2').css('top','70px');
    }else{
        $('.submenupage2').css('position','static');
        $('.submenupage2').css('top','70px');
    }

    $(window).on("scroll", function() {
        var scrollHeight = $(document).height();
        var scrollPosition = $(window).height() + $(window).scrollTop();
        if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
            $('.submenupage4').css('position','static');
        }       
    });*/     
    });
    });

标签： jqueryajax

jquery - 带有 jquery load() 函数的非常困难的脚本不想正常工作

问题描述

解决方案

推荐阅读