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 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>
2 | <div id="loading">Đang tải dữ liệu...</div> |
Viết CSS để định dạng thành phần div#loading theo ý bạn, đoạn CSS của tôi như sau:
05 | background: #eee url(loading.gif) no-repeat center 70%; |
11 | -webkit-border-radius: 8px; |
12 | -moz-border-radius: 8px; |
Trong thẻ <head> bạn thêm đoạn code jQuery như sau:
1 | <script type="text/javascript"> |
2 | $(window).load(function(){ |
3 | $('#loading').fadeOut(50).remove(); |
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!
Download demo Loading image (3.4 KiB, 1,527 Lượt tải)
0 nhận xét:
Không cho phép có nhận xét mới.