Thêm hiệu ứng Ajax loading

Bài trước mình Hướng dẫn code tiện ích bài viết theo label cho blogspot, bài viết hiển thị ở dạng list style number đẹp mắt và đơn giản.

Trong lúc chờ tải (loading)

Sau khi load xong

Tiếp theo bài này mình thêm hiệu ứng loading trong lúc chờ tải, khi nào load xong bài viết thì hiệu ứng loading ẩn đi.

Các bước cập nhật thêm CSS của bài trước như sau:

.ploading{position:relative;overflow:hidden;display:block;height:220px;margin:0}

.ploading:after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-16px 0 0 -16px;border:2px solid #2874ef;border-top-color:#e1e8ed;border-right-color:#e1e8ed;border-radius:100%;animation:spinner 1s infinite linear;transform-origin:center}

@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

Tiếp theo đoạn code Jsonp Callback bác bạn cập nhật như sau:

<script>

    //<![CDATA[

    function getpost(e) {

        for (var t = 0; t < e.feed.entry.length; t++) {

            e.feed.entry[t];

            for (var n = 0; n < e.feed.entry[t].link.length; n++)

                if ("alternate" == e.feed.entry[t].link[n].rel) {

                    var a = e.feed.entry[t].link[n].href;

                    break

                } var l = e.feed.entry[t].title.$t,

                r = '<li><a href="' + a + '" title = "' + l + '">' + l.substring(0, 45) + "</a></li>";

            $(".numberlist ol").append(r)

        }

    }

    window.addEventListener("load", function() {

        $.ajax({

            url: "/feeds/posts/default/-/Blog",

            type: "get",

            data: {

                alt: "json",

                "max-results": 5

            },

            dataType: "jsonp",

            jsonpCallback: "getpost",

            beforeSend: function() {

                $(".numberlist").addClass("ploading")

            },

            success: function() {

                $(".numberlist").removeClass("ploading")

            }

        })

    });

    //]]>

</script>

Tương tự như code cũ trước đó mình chỉ cần thêm đoạn này vô sau jsonpCallback: "getpost" và được cách nhau bởi dấu phẩy nha các bạn.

            beforeSend: function() {

                $(".numberlist").addClass("ploading")

            },

            success: function() {

                $(".numberlist").removeClass("ploading")

            }

Xong các bạn lưu lại và kiểm tra kết quả khi xem blog. Như vậy là mình đã cập nhật thêm hiệu ứng Ajax loading cho blogspot đơn giản nhất.

Các bạn xem lại bài trước tại đây: Hướng dẫn code tiện ích bài viết theo label 

Các bạn thấy hay thì ngại gì một comment tương tác cho vui nhỉ :)

Thêm hiệu ứng Ajax loading được thiết kế đẹp hiện đại chuyên nghiệp chuẩn seo, tối ưu code giúp trang blogspot load nhanh

Chi tiết liên hệ ĐT / Zalo: 097 1539 681

Khi mua template các bạn được hỗ trợ cài đặt hoàn chỉnh, hỗ trợ qua Teamviewer, Ultraviewer

Tags: Blog