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

Trong bài học kinh nghiệm này, tất cả chúng ta sẽ khám phá 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 tắc. 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 website chờ load đủ trang. Mặc định hiển thị layer hiệu ứng load trang ở trên cùng. Các bạn hoàn toà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 quan tâm mỗi trình duyệt các thuộc tính animation khác nhau nhé. Nếu trình duyệt tương hỗ HTML5 và CSS3 thì đơn thuầ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

Nội dung website

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 hoàn toàn có thể tìm hiểu thêm 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ó vướng mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc gửi tin nhắn qua Fanpage Góc làm web.

Liên hệ

Như vậy cachlam.org đã chia sẻ với bạn bài viết Bài 24: Tạo hiệu ứng load trang hay chờ tải trang bằng jQuery. Hy vọng bạn đã có được 1 cách làm hay và chúc bạn có được nhiều thành công trong cuộc sống hơn nữa!

Xem thêm các hướng dẫn và mẹo vặt hay: https://cachlam.org/huong-dan

Cách làm thú vị khác
Cách Làm Gỏi Ốc Giác Thơm Ngon Độc Đáo

Ốc giác tích hợp với cà rốt bào sợi, rau thơm, hành phi, ớt tươi cùng những loại gia vị Read more

5 Cách làm Gỏi Ốc Giác đu đủ giòn, ngon, lạ miệng đơn giản nhất – Bigvn

5/5 – ( 1 bầu chọn ) Giới thiệu món ốc giác đu đủ sẽ làm Món gỏi ốc giác Read more

8 Món chay ngon hấp dẫn làm từ ớt chuông – Hapi Vegan

1. Ớt chuông xào nấm Nguyên liệu Ớt chuông, nấm tươi Dầu ăn, boa rô Bột nêm, mì chính, muối, Read more

Nếu Tinh Ý Thì Gốc Cây Cà Phê Cũng Có Thể Chế Tác Nghệ Thuật

Thay vì đốn bỏ những gốc cây cafe lâu năm thì bạn có khi nào nghĩ chúng hoàn toàn có Read more

Cách làm gối chữ U đơn giản từ vải vụn – Cơ Hội Mua Sắm Tiêu dùng – Tuổi Trẻ Online

Cuộc sống này có vô vàn điều kỳ diệu đến nỗi bạn khó lòng tưởng tượng ra được điều đó. Read more

Cho con nằm gối vỏ đỗ, thảo dược: Bác sĩ nói gì?

Làm gối từ vỏ đậu xanh, đậu đen, thảo dược là giải pháp dân gian được nhiều mẹ truyền tai Read more

Hướng dẫn cách may gối bí – https://cachlam.org

Gối bí là cách may gối từ những mảnh vải thừa không còn giá trị sử dụng. Thay vì vứt Read more

Cách làm nệm cho chó đơn giản và tiết kiệm | https://cachlam.org

Cách làm nệm cho chó không những giúp bạn tiết kiệm ngân sách và chi phí được một khoản tiền Read more

Powered by tế bào gốc drcell

DMCA.com Protection Status