Tạo màn hình loading html
Show 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"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ếtPhần HTML
Phần CSSTù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 JSDù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ệ Aug 17, 2017 • 2 min read Có thể để ý thấy nhiều bạn trẻ khi develop 1 chức năng nào đấy cần gọi API bằng AJAX với Jquery thì rất hay để lỗi không tạo màn hình Loading để khoá action từ người dùng lại, điều này có thể dẫn đến 1 số tác hại như sau:
Việc tạo màn hình Loading cũng không đến nỗi phức tạp với HTML&CSS&JQuery nên việc tạo 1 màn hình Loading khi gọi API thì sẽ đảm bảo UX tốt hơn, hạn chế lỗi và nâng cao chất lượng hệ thống hơn. Loading imageKiếm 1 cái ảnh gif hiệu ứng loading, VD như này, tool generator online cũng nhiều. HTMLTạo 1 div trong body
CSS
JQUERYThêm đoạn xử lý callback khi call AJAX
|