RSSJquery

Tạo Loading image khi trang đang tải dữ liệu với jQuery và CSS

Cũng lâu rồi không viết bài nào về jQuery và CSS, hôm nay quay lại một chút với hiệu ứng Loading image sử dụng jQuery và CSS. Khi trang web của bạn mất nhiều thời gian để tải dữ liệu (Chẳng hạn có nhiều file hình quá lơn, server mất nhiều thời gian để xử lý…). Lúc đó một chút hiệu ứng Loading (Thông báo đang tải trang) sẽ thực sự có ích. Để rõ hơn, bạn có thể xem Demo bên dưới, trong demo tôi có chèn một số file hình có dung lượng lớn nên mất nhiều thời …

Cũng lâu rồi không viết bài nào về jQuery và CSS, hôm nay quay lại một chút với hiệu ứng Loading image sử dụng jQuery và CSS.
Khi trang web của bạn mất nhiều thời gian để tải dữ liệu (Chẳng hạn có nhiều file hình quá lơn, server mất nhiều thời gian để xử lý…). Lúc đó một chút hiệu ứng Loading (Thông báo đang tải trang) sẽ thực sự có ích.
Để rõ hơn, bạn có thể xem Demo bên dưới, trong demo tôi có chèn một số file hình có dung lượng lớn nên mất nhiều thời gian để tải trang.

Demo Loading Image

  Download demo Loading image (3.4 KiB, 17 Lượt tải)

Demo xong –> Thực hành thôi.

Để tạo hiệu ứng Loading image, bạn cần thêm vào một thành phần (Loading) vào code HTML của bạn, tốt nhất là ngay sau thẻ <body>

<body>
 <div id="loading">Đang tải dữ liệu...</div>
 <!-- code HTML của bạn -->
</body>

Viết CSS để định dạng thành phần div#loading theo ý bạn, đoạn CSS của tôi như sau:

#loading {
 position: fixed;
 left: 42%;
 top: 40%;
 background: #eee url(loading.gif) no-repeat center 70%;
 height: 50px;
 width: 150px;
 text-align: center;
 padding-top: 10px;
 border-radius: 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

Trong thẻ <head> bạn thêm đoạn code jQuery như sau:

<script type="text/javascript">
 $(window).load(function(){
 $('#loading').fadeOut(50).remove();
 })
</script>

Lưu ý: Ở trên chúng ta sử dụng bộ sử lý sự kiện window.onload, nếu bạn sử dụng bộ quản lý sự kiện $(document).ready() sẽ không có tác dụng. Bởi vì:

- window.onload: Sẽ được áp dụng khi toàn bộ dữ liệu đã được tải, bao gồm cả các thành phần media (hình ảnh, video…)
- $(document).ready(): Sẽ được áp dụng ngay khi các thành phần HTML (DOM) sẵn sàng để thao tác mà không phải chờ các thành phần media tải xong.

Do đó, đoạn code trên sẽ remove thành phần div#loading ra khỏi tài liệu HTML sau khi các thành phần media được tải.

Lưu lại, chạy thử và xem kết quả. Chúc bạn thành công!

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu