Trong bài học này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng load trang, nói đúng hơn là hiệu ứng chờ tải trang bằng jQuery. Có 2 cách để tạo hiệu ứng này nhưng đều chung một nguyên lý. Một là dùng file gif để làm hiệu ứng. Hai là dùng animation css để làm hiệu ứng.
- Video – Tạo hiệu ứng load trang hay chờ tải trang bằng jQuery
- Ý tưởng
- Hướng dẫn chi tiết
- Phần HTML
- Phần CSS
- Phần JS
Video – Tạo hiệu ứng load trang hay chờ tải trang bằng jQuery
Ý tưởng
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".
+ Chia layer cho web: Ẩn hết nội dung trang web chờ load đủ trang. Mặc định hiển thị layer hiệu ứng load trang ở trên cùng. Các bạn có thể dùng ảnh gif hoặc animation css để tạo hiệu ứng. Nếu dùng animation css, các bạn lưu ý mỗi trình duyệt các thuộc tính animation khác nhau nhé. Nếu trình duyệt hỗ trợ HTML5 và CSS3 thì đơn giản hơn. Chỉ cần dùng animation là xong.
+ Bắt sự kiện load hết trang, nếu load xong thì ẩn layer hiệu ứng. Dùng hàm wimdow onload để bắt sự kiện load trang.
Hướng dẫn chi tiết
Phần HTML
<body class="preloading"> <!-- Hiệu ứng load --> <!-- <div class="load"> <img src="loader.gif"> </div> --> <div class="loader"> <span class="fas fa-spinner xoay icon"></span> </div> <div class="content"> Nội dung website </div> </body>Phần CSS
Tùy vào bạn chọn cách nào để tạo hiệu ứng, dùng ảnh gif hay animation css. Bạn có thể tham khảo trong code mẫu kèm theo bên dưới nha.
"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
Phần JS
Dùng hàm on load để bắt sự kiện load trang. Sau khi load ong sẽ removeClass hiệu ứng.
$(window).on('load', function(event) { $('body').removeClass('preloading'); // $('.load').delay(1000).fadeOut('fast'); $('.loader').delay(1000).fadeOut('fast'); });Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Liên hệ
Đã đăng vào thg 6 22, 2017 4:25 SA 7 phút đọc
Giới Thiệu
AJAX - "Asynchronous JavaScript and XML" - là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.
jQuery cung cấp method $.ajax và một số methods tiện lợi giúp bạn làm việc với XHRs thông qua trình duyệt một cách dễ dàng hơn.
Download thư viện jQuery
Bạn có thể lên trang chủ jquery để download bộ mới nhất. //jquery.com/download/
Phương thức “load()”
Sau đây là cú pháp đơn giản cho phương thức load() trong jQuery: [selector].load( URL, [data], [callback] );
Miêu tả chi tiết về các tham số: URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi database
Data − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.
Callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái.
Ví dụ
Ở đây, load() khởi tạo một AJAX request tới URL file đã xác định là ./result.html. Sau khi tải file này, tất cả nội dung sẽ được đưa đến vào trong phần tử
được tag với ID là stage.
Phương thức “get()” và “post()”
Ở 2 phương thức này thì trong đó phương thức “ get() ” giống “ load() ” về mặt kĩ thuật đó chính là dùng “method” là “GET” trong “ <form> ”. Tương tự “ post() ” sẽ tượng trưng cho “method” là “POST” của “ <form> ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax()” mà chúng ta sẽ làm quen ở phần tới.
Phương thức “get()”
$(document).ready(function() { $('#load-du-lieu').click(function(e) { e.preventDefault(); $.get('vidu1.html', function(ketqua) { $('#noidung').html(ketqua); $('#noidung').html($('#chuoi-can-lay').html()); }); }); });- Đoạn code này cho bạn thấy rằng để sử dụng được phương thức “ get() ”, các bạn cần dùng đến biến “ $ ” (hay “ jQuery ”) sau đó sử dụng thẳng phương thức “ get()
- Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “ load() ”.
- Kết quả trả về sẽ thông qua đối số thứ 2 của phương thức “ get() ” là một Anonymous Function có đối số mặc định trả về là “ ketqua ”
- Để tách lọc dữ liệu từ “ ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “ <body> ” của chúng ta. Sau đó chúng ta dùng tiếp “ $(‘#id-can-lay’).html() ” để tách lọc dữ liệu
- Ngoài ra “ get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu.
Phương Thức “post()”
Cách dùng của phương thức “ post() ” sẽ giống với “ get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.
$(document).ready(function() { $('#load-du-lieu').click(function(e) { e.preventDefault(); $.post('vidu2.php', { a: "content abc", b: "content bcd" },function(ketqua) { $('#noidung').html(ketqua); }); }); });Nội dung của file “vidu2.php“:
<?php echo '<pre>' .print_r($_POST,true). '</pre>';Ở ví dụ phương thức “ post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “ get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.
Phương thức “ajax()”
Ngoài các hàm trên mà chúng ta thường hay dùng, jQuery còn cung cấp thêm cho ta một hàm ajax() tổng quát. Với hàm này, ta có thể tùy chỉnh cấu hình, thêm bớt các thông số chứ không bị bó hẹp như hai hàm trên.Chỉ cần sử dụng 1 hàm này có thể đáp ứng các yêu cầu về thực thi ajax.
$(document).ready(function() { $('#load-du-lieu').click(function(e) { e.preventDefault(); $.ajax({ url: 'vidu2.php', type: 'POST', dataType: 'html', data: { a: "content abc", b: "content bcd" } }).done(function(ketqua) { $('#noidung').html(ketqua); }); }); });Đối số đầu tiên chúng ta truyền vào cho phương thức “ ajax() ” chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:
- url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu
- type : phương thức gửi đi tương tự như của “ <form> ”, mặc định là “GET” nếu như các bạn không truyền vào.
- dataType : xác định dữ liệu trả về thuộc dạng nào? Nếu các bạn không truyền thì jQuery tự động nhận biết kiểu dữ liệu (script, html, json…). Tuy nhiên, tôi khuyến cáo các bạn nên truyền vào đầy đủ để nhận dữ liệu chính xác nhất. Và thông dụng nhất chính là “html”.
- data : truyền dữ liệu sang đường dẫn chỉ định để thực hiện xử lý và trả về dữ liệu. Tương tự như cách truyền dữ liệu của phương thức “ post() ”.
- “ done() ” : ở loạt các bài viết hướng dẫn các bài viết về kĩ thuật Ajax với phương thức “ ajax() ” trước đây trên Internet. Thay vì dùng “done()” chúng ta sẽ dùng thuộc tính “success” trong đối tượng truyền vào “ ajax() ” nhưng từ các phiên bản mới hơn của jQuery. Họ khuyến cáo chúng ta nên sử dụng các phương thức như “ done() , fail() , always() ” (Tương ứng: Hoàn thành, thất bại và luôn luôn thực hiện). Nên tùy vào nhu cầu mà bạn xài phương thức tương ứng. Và nên nhớ là đi kèm với phương thức “ ajax() ” hoặc lưu vào một tên biến rồi dùng sau để nhận kết quả trả về.
Các bạn có thể xem thêm về tài liệu hướng dẫn của phương thức trên tại: //api.jquery.com/category/ajax
All rights reserved