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ỉ :)

Bài viết: Thêm hiệu ứng Ajax loading được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog