Bài 24: Tạo hiệu ứng load trang hay chờ tải trang bằng jQuery

0

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

+ 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ự kei65n 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.

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ệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.