Akina for Typecho 首页实现自动加载功能


最新的Akina for Typecho V2.1版本的首页文章列表是手动加载的,体验尚缺。为了更好体验,把拉到底自动加载功能加上。
1、打开global.js(在\usr\themes\Akina\js目录下);
2、找到下面代码(一般在276行)

jQuery(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 100,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        offset_opacity = 1200,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 700,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
             }, scroll_top_duration
        );
    });
    
    //pjax
    if(app.pjax){
    $(document).pjax('a[target!=_top]', '#page', {
            fragment: '#page', //主容器
            timeout: 8000, // 8秒限时
        }).on('pjax:send', function() {
            $('body').append('<div id="preloader"><div id="preloader-inner"></div></div>'); // 加载过度动画
        }).on('pjax:complete', function() { // 加载完毕                
            clickEvent(); // 一些点击事件
            $('#preloader').remove(); // 删除过度动画
        });
    }
});    

3、在末尾的});前插入以下代码即可。

//自动加载
        var finished = false;
        var i = 1; //设置当前页数,全局变量
        var winH = $(window).height(); //页面可视区域高度 
        var scrollHandler = function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滚动条top 
            var aa = (pageH - winH - scrollT) / winH;
            if (!finished && aa < 0.2) { //0.02是个参数
                if (i % 5 === 0) { //每5页做一次停顿3s
            setTimeout(function(){if($("#pagination").length>0) $('#pagination a').click();},3000);    
                                   
                } else {
               if($("#pagination").length>0) $('#pagination a').click();
                    
                }
                if($("#comments").length>0) $('.comments-hidden').click();                
                finished = true;
                setTimeout(function(){finished = false;},500);
            i++;
            }
        }
        $(window).scroll(scrollHandler); //定义鼠标滚动事件
    //自动加载

大功告成,是不是很简单?

声明:Alber.F|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Akina for Typecho 首页实现自动加载功能Alber.F


医疗器械体外诊断行业的行业从业者,产品生命周期内产品合规管理