blog/public/js/mypjax.js

// 定义pjax 预设pjax
var pjax = new Pjax({
    // 这里填写页面中改变的部分（和 CSS 选择器用法一样）
    selectors: ["#pjax-container"],
    cacheBust: false,
    elements: "a",
});
// 设置图片灯箱回调函数
function lazyimg_pjax() {
    ; (function ($) {

        var defaults = {
            coverColor: "#dfdfdf",
            coverDiv: "",
            showTime: 300,
            offsetBottom: 0,
            offsetTopm: 50,
            onLoadBackEnd: function (index, dom) { },
            onLoadBackStart: function (index, dom) { }
        }

        //所有待load src
        var srcList = []
        var lazyLoadCoutn = 0;
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
        var lazyImgList = $("img[data-lazy-src]");
        var default_base64_src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

        //获取img
        function getImgNaturalDimensions(src, callback, lazyLoadCoutn) {
            var nWidth, nHeight
            var image = new Image()
            image.src = src;
            image.onload = function () {
                callback(image.width, image.height);
                defaults.onLoadBackStart(lazyLoadCoutn, $("img[data-lazy-src]:eq(" + lazyLoadCoutn + ")"));
            }
            return [nWidth, nHeight];
        }

        function showImg(lazyLoadCoutn, callback) {

            var src = lazyImgList.eq(lazyLoadCoutn).attr("data-lazy-src")
            getImgNaturalDimensions(src, function () {
                try {

                    meng($("img[data-lazy-src]:eq(" + lazyLoadCoutn + ")"), lazyLoadCoutn, callback)
                } catch (error) {

                }
            }, lazyLoadCoutn)
        }

        function meng(jDom, lazyLoadCoutn, callback) {
            if (jDom.attr("data-comp")) {
                return;
            }
            jDom.css("visibility", "hidden");
            jDom.attr("src", jDom.attr("data-lazy-src"))
            var w = jDom.width();
            var h = jDom.height();
            var offsetTop = jDom.offset().top;
            var offsetLeft = jDom.offset().left;

            jDom.css("visibility", "visible");
            $("body").append("<div class='meng-lazy-div" + lazyLoadCoutn + "' style='background-color: " + defaults.coverColor + ";position:absolute;width:" + w + "px;height:" + h + "px;top:" + offsetTop + "px;left:" + offsetLeft + "px;z-index:500'>" + defaults.coverDiv + "</div>");
            noneM(lazyLoadCoutn, callback, jDom);
            jDom.attr("data-comp", "true");
        }

        function noneM(lazyLoadCoutn, callback, jDom) {
            if (true) {
                $(".meng-lazy-div" + lazyLoadCoutn).animate({ opacity: "0" }, defaults.showTime, function () {
                    $(this).remove();
                    defaults.onLoadBackEnd(lazyLoadCoutn, jDom)
                    callback();
                });
            }
        }

        function checkOffset() {
            var scrollTop = $(document).scrollTop();
            var onlazyList = [];
            lazyImgList.each(function (index) {
                var dom = $(this);
                if (!dom.attr("data-comp")) {
                    if (dom.offset().top - scrollTop + defaults.offsetTopm >= 0 && dom.offset().top - scrollTop < (windowHeight + defaults.offsetBottom)) {
                        onlazyList.push(index);
                    }
                }
            })

            if (onlazyList.length != 0) {
                showImg(onlazyList[0], function () {
                    checkOffset();
                });
            }
        }

        function range() {
            checkOffset();

        }

        function init(setting) {
            lazyImgList = $("img[data-lazy-src]");
            defaults = $.extend(defaults, setting);

            lazyImgList.each(function () {
                var sr = $(this).attr("data-lazy-src");
                srcList.push(sr);

                $(this).attr("src", default_base64_src);
            });
            range();
            window.onscroll = function () {
                range()
            }
        }
        function tryAgain() {
            $("img[data-lazy-src]").removeAttr("data-comp")
            init(defaults)
        }

        window.lazyLoadInit = init;

        window.lazyLoadAgain = tryAgain;


    })($)
}
// 设置pjax预先加载代码
function pjax_reload() {
    // 给pjax容器加入css过渡动画
    $("#pjax-container").addClass("uk-animation-slide-bottom-small");
    // 评论区过渡动画
    $(".comment-meta").attr("uk-scrollspy", "cls: uk-animation-fade; delay: 100");
    $(".comment-author vcard").attr("uk-scrollspy", "cls: uk-animation-fade; delay: 100");
    $(".comment-metadata").attr("uk-scrollspy", "cls: uk-animation-fade; delay: 100");
    $(".comment-content").attr("uk-scrollspy", "cls: uk-animation-fade; delay: 100");
    $(".reply").attr("uk-scrollspy", "cls: uk-animation-fade; delay: 100");
    // 说说页面过渡动画
    $("#shuoshuo_body").attr("uk-scrollspy", "target: > .shuoshuo; cls: uk-animation-fade; delay: 250");
}
// pjax发送时期
document.addEventListener("pjax:send", function () {
    // pjax动画减少圆圈动画
    NProgress.configure({
        showSpinner: false
    });
    // pjax执行动画开始
    NProgress.start(); //加载动画效果开始
});
// Pjax 成功后，重新加载下面的函数
document.addEventListener("pjax:success", function () {
    // 重载图片懒加载插件的js
    lazyimg_pjax()
    lazyLoadInit({
        coverColor: "white",
        coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px;color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
        offsetBottom: 0,
        offsetTopm: 0,
        showTime: 1100
    });
    // 激活文章图片灯箱
    window.ViewImage && ViewImage.init('#writing_content img,.text img , .memos-photo img , .gallery-thumbnail img');
});
// pjax加载完成
document.addEventListener("pjax:complete", function () {
    // pjax完成动画
    NProgress.done();
    // 重载一些js样式调整
    pjax_reload()
    //  激活返回顶部插件
    $(function () {
        $.scrollUp({
            animation: 'fade',
            scrollImg: true
        });
    });
    // 重载评论
    if(document.querySelector("#waline")){
        Waline.init({
            el: '#waline',
            serverURL: 'https://waline.usj.cc',
            lang: "zh-cn",
            imageUploader: false,
            search: false,
            copyright: false,
            reaction: [
                'https://s2.loli.net/2023/09/24/EhqxZ6DFIJojGNa.gif',
                'https://s2.loli.net/2023/09/24/qmf5As3evWNXwGQ.gif',
                'https://s2.loli.net/2023/09/24/ueWLPkmYw75x4cs.gif',
                'https://s2.loli.net/2023/09/24/nsC1OGoBKfa8Hel.gif',
                'https://s2.loli.net/2023/09/24/VKuBXqR91TPHnyc.gif',
                'https://s2.loli.net/2023/09/24/2OmAWPeulq4ta8T.gif'
            ],
          });
    }
});