Gallery

Liên Hệ Hoàng Thanh

gpextreme@yahoo.com 0903 398 881

Ngày đăng: 10/06/2013 . Số lần xem: 10326

Tạo Loading image khi trang đang tải dữ liệu 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.

Để 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>

</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!