Z-Blog 点击标题链链显示Loading加载效果

介绍

Z-blog是一个开源的博客系统，它的主要特点是简单易用。它基于PHP语言和MySQL数据库，同时采用了MVC设计模式，为用户提供了完备的的模板和插件系统。

问题

然而，当一个用户在Z-Blog中点击文章跳转到另一页时，一些情况下，网页需要加载一些大数据量的资源。这会导致页面跳转变慢，并且用户可能会认为网站不可用。这时需要添加一个“Loading”动画效果。

解决方案

我们可以通过CSS和JavaScript来实现一个页面加载时的动画效果。这个实现方法比较简单，只需要在页面加载之前，在页面中添加一个覆盖了整个页面的半透明遮罩（mask），然后在遮罩上添加一个 loading（加载中）的图标。

1. 首先，我们需要在CSS中定义一下遮罩的样式，请添加下列代码

#mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

2. 接下来，我们需要在JavaScript中编写代码，在页面加载之前添加遮罩并在其上添加loading的效果，代码如下

$(function () {
    // 在这里添加loading效果
    var mask = $('
').attr('id', 'mask');
    var maskHtml = '
' +
        '
' +
        '
' +
        '
' +
        '
';
    mask.html(maskHtml);
    $('body').append(mask);

    // 停止loading效果
    $(window).load(function(){
        mask.hide();
    });
});

3. 最后，我们需要在点击文章标题链接时，添加一个触发遮罩显示效果的事件，代码如下

$('a').click(function(){
    $('#mask').fadeIn(200);
});

效果

通过以上方法，我们可以添加一个简单的“Loading”动画效果，在页面点击跳转时，显示加载中的遮罩，并在加载完成之后，将遮罩隐藏起来。这样可以提高用户的体验感，更好的展示Z-Blog的优势。