Giới thiệuChính sáchBảng giáThanh toánLiên hệFeedback

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)

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

Sau khi load xong

Thêm hiệu ứng Ajax loading



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

Nhận xét

Đăng nhận xét

Mẫu tiếp thị liên kết

Xem thêm
×