博客和主页很久前就接入了jad大佬的一言系统,只不过采用的是同步加载请求;
由于我的一言放在了页首,所以在加载的时候就会等待获取一言后才会继续往下加载,
加载效率不忍直视..
并且如果一言api暂时的挂掉的话,我的页面也都会加载不出来,严重影响阅读体验。

所以就准备采用异步加载的方式加载一言,这样就对页面的加载速度没有什么影响了...

至少一言挂掉了,我的页面也都可以打开了...

废话少说,直接放出我的代码

<script>
(function getHitokoto() {
    $.ajax({
        url: "https://api.imjad.cn/hitokoto/?encode=jsc&charset=utf-8&length=50",
        dataType: "jsonp",
        async: true,
        jsonp: "callback",
        jsonpCallback: "hitokoto",
        success: function (result) {
            $('#hitokoto').html("<p>" + result.hitokoto + "</p>")
        },
        error: function () {
            $('#hitokoto').html("<p>读取数据失败了的说……_(:з」∠)_</p>")
        }
    });
})();
</script>

PS:建议将代码存为js文件后作为外链调用,若是直接内联在HTML里会增大网页体积,从而拖慢加载速度

由于异步加载使用了ajax,所以需要在此之前加载jQuery库

具体调用方法:
1.将下面两段代码放入HTML页面的底部(注意顺序,必须先加载jQuery,然后加载一言异步JS)

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 提前加载 jQuery -->
<script>
(function getHitokoto() {
    $.ajax({
        url: "https://api.imjad.cn/hitokoto/?encode=jsc&charset=utf-8&length=50",
        dataType: "jsonp",
        async: true,
        jsonp: "callback",
        jsonpCallback: "hitokoto",
        success: function (result) {
            $('#hitokoto').html("<p>" + result.hitokoto + "</p>")
        },
        error: function () {
            $('#hitokoto').html("<p>读取数据失败了的说……_(:з」∠)_</p>")
        }
    });
})();
</script>
<!-- 一言异步加载 Js 代码 -->

2.将下面这段代码放入页面内需要展示一言的位置即可

<div id="hitokoto">『少女祈祷中…』</div>

3.enjoy~