Giới thiệu
Khi phát triển các trang web và ứng dụng web, bao gồm cả hoạt ảnh đang tải có thể cải thiện đáng kể trải nghiệm người dùng bằng cách truyền đạt những gì đang xảy ra. Điều này thu hút người dùng và thu hút sự chú ý của họ trong khi tải nội dung và nó giúp người dùng hiểu những gì đang xảy ra thay vì để họ đoán.
Trong hướng dẫn này, chúng ta sẽ xem xét cách sử dụng Vanilla JavaScript để tạo hoạt ảnh đang tải. Chúng tôi sẽ làm việc với cả hoạt hình GIF và trình tải do CSS tạo và xem cách sử dụng chúng trong hai trường hợp: tải nội dung khi khởi chạy ứng dụng / trang web hoặc yêu cầu nội dung từ API bên ngoài.
Cách tạo bộ tải
Có nhiều cách khác nhau mà mọi người có thể muốn hiển thị trình tải của họ. Với mục đích của hướng dẫn này, chúng tôi sẽ xây dựng một trình tải sẽ bao phủ toàn bộ màn hình và sau đó biến mất khi trang tải xong. Trước hết, chúng ta cần tạo một trang HTML giữ chỗ:
<div class="loader-container">
<div class="spinner"></div>
</div>
<div class="main-content">
<h1>Hello World!</h1>
<p>
This is a demo Project to show how to add animated loading with Vanilla
JavaScript.
</p>
<div class="buttons">
<button class="btn"><a href="#">Read Article</a></button>
<button class="btn get-quote">Generate Quote</button>
</div>
<div class="quote-section">
<blockquote class="quote">
If you do not express your own original ideas, if you do not listen to
your own being, you will have betrayed yourself.
</blockquote>
<span class="author">- Rollo May</span>
</div>
</div>
Vì đơn giản, chúng tôi chỉ có hai <div> khối - một cho trình tải và một cho nội dung của trang web.
Như đã nêu trước đây, biểu tượng tải có thể là một GIF, một biểu tượng động được tạo bằng CSS hoặc thứ gì đó khác. Điều quan trọng cần nhớ là cách tiếp cận tương tự áp dụng cho bất kỳ loại biểu tượng tải nào mà chúng tôi sử dụng.
Tạo bộ tải bằng GIF
A GIF là một biểu tượng hoạt hình phát vô thời hạn. Một lần chúng tôi đã tạo ra của chúng tôi GIF, chúng tôi sẽ tạo kiểu loader-container div đó sẽ chứa nó. Có rất nhiều cách để tạo kiểu cho nó! Bạn có thể thực sự sáng tạo ở đây. Chúng tôi chỉ cần thêm một lớp có nền đen trên đầu trang của chúng tôi cùng với biểu tượng, để "chặn" nội dung đang tải:
.loader-container {
width: 100%;
height: 100vh;
position: fixed;
background: #000
url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
no-repeat;
z-index: 1;
}
Khi chúng tôi tải trang web của mình ngay bây giờ, chúng tôi sẽ thấy một nền đen với GIF tải ở giữa màn hình, tương tự như sau:
Tại thời điểm này, chúng tôi đã sẵn sàng triển khai tải bằng JavaScript. Nhưng chúng ta cũng hãy xem cách chúng ta có thể sử dụng hoạt ảnh do CSS tạo thay vì GIF, không yêu cầu tệp bổ sung để nhập.
Tạo trình tải bằng CSS
Chúng tôi sẽ tạo chính xác cùng một biểu tượng với CSS. Hãy nhớ rằng, chúng tôi đã tạo thêm một div (spinner) bên trong loader-container div và đó là những gì chúng tôi sẽ sử dụng để đại diện cho biểu tượng:
.spinner {
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin-anim 1.2s linear infinite;
}
@keyframes spin-anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Đoạn mã trên sẽ giúp chúng ta tạo một biểu tượng trình tải CSS mà bây giờ chúng ta có thể sử dụng div loader-container để căn giữa và thêm nền đen như chúng ta đã làm trước đây:
.loader-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background: #000;
z-index: 1;
}
Bây giờ chúng ta đã thấy hai loại trình tải hoạt ảnh có sẵn, hãy sử dụng JavaScript để kiểm soát thời điểm hoạt ảnh tải này xuất hiện và biến mất.
Lưu ý: Bạn có thể xem trực tiếp này Bản demo CodePen để xem trình tải mà chúng tôi đã tạo trong hoạt động.
Cách triển khai tải ảnh động bằng JavaScript
JavaScript cho phép chúng tôi điều khiển cấu trúc HTML của mình và xóa hoặc ẩn loader-container điều đó hiện đang được hiển thị ở đằng trước nội dung của trang web. Có hai cách tiếp cận chính để đạt được điều này - chỉ cần ẩn loader-containerhoặc xóa hoàn toàn.
Cho dù bạn chọn cách tiếp cận nào, bước đầu tiên là sử dụng querySelector() or getElementById() để lấy loader-container để chúng tôi có thể thao tác nó:
const loaderContainer = document.querySelector('.loader-container');
Thứ hai, chúng tôi sẽ sử dụng eventListener để lắng nghe một load sự kiện, để nó gọi hàm gọi lại khi load sự kiện xảy ra:
window.addEventListener('load', () => {
});
Ẩn phần tử đang tải…
Cách tiếp cận phổ biến nhất là ẩn loader-container với display: none để nó biến mất khi nội dung được tải đầy đủ.
HTML DOM cho phép chúng tôi thay đổi kiểu của các phần tử HTML của chúng tôi từ JavaScript và mã bên dưới cho biết rằng chúng tôi đang thiết lập vùng chứa của trình tải display tài sản để none để nó không xuất hiện khi load là thành công:
window.addEventListener('load', () => {
loaderContainer.style.display = 'none';
});
Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!
Ngoài ra, bạn có thể tạo một lớp riêng biệt chứa display: none bất động sản:
.loader-container-hidden {
display: none;
}
Và sau đó sử dụng classList.add() để thêm lớp vào loader-container thành phần:
window.addEventListener('load', () => {
loaderContainer.classList.add('loader-container-hidden');
});
Xóa phần tử đang tải…
Cho đến nay, chúng tôi đã thấy một phương pháp chính cho phép chúng tôi ẩn loader-container, ngụ ý rằng phần tử vẫn hiện diện, nhưng bị ẩn. Một tùy chọn khác là xóa hoàn toàn phần tử:
window.addEventListener('load', () => {
loaderContainer.parentElement.removeChild(loaderContainer);
});
Tại thời điểm này, khi chúng tôi tải trang của mình, hoạt ảnh tải sẽ được hiển thị cho đến khi nội dung của trang được tải đầy đủ.
Triển khai tải hoạt ảnh khi yêu cầu nội dung bên ngoài từ API
Tìm nạp nội dung từ API bên ngoài là một tình huống khác có thể cần bao gồm trình tải. Loại nội dung này có thể mất một khoảng thời gian để tìm nạp và hiển thị, vì vậy tốt nhất là bạn nên bao gồm trình tải.
Trong trường hợp của chúng tôi, chúng ta hãy thử lấy một trích dẫn từ báo giá API bằng cách sử dụng API Tìm nạp tích hợp. Lưu ý rằng HTML mà chúng tôi đã tạo ở đầu bài viết này có “Tạo báo giá” cái nút. Tất cả những gì chúng ta phải làm là sử dụng document.querxySelector() để lấy phần tử và tạo một hàm gọi lại để xử lý click sự kiện được kích hoạt khi người dùng nhấp vào nút:
const getQuoteBtn = document.querySelector('.get-quote');
getQuoteBtn.addEventListener('click', () => {
fetch('https://api.quotable.io/random')
.then((response) => {
return response.json();
})
.then((data) => {
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
quote.innerHTML = data.content;
author.innerHTML = data.author;
});
});
Điều này sẽ hỗ trợ chúng tôi thành công trong việc đưa các báo giá ngẫu nhiên vào ứng dụng của mình, nhưng chúng tôi muốn có tải hoạt ảnh để người dùng biết rằng chúng tôi đang mong đợi nội dung. Để thực hiện điều này, chúng tôi sẽ tạo hai phương pháp, một phương pháp để hiển thị loader-container và cái còn lại để ẩn nó:
const displayLoading = () => {
loaderContainer.style.display = 'block';
};
const hideLoading = () => {
loaderContainer.style.display = 'none';
};
Lưu ý: Chúng tôi đang sử dụng display: none, nhưng chúng tôi có thể sử dụng một trong các phương pháp khác mà chúng tôi đã liệt kê trước đó.
Tại thời điểm này, cuối cùng chúng ta có thể kết hợp hoạt ảnh đang tải vào hàm gọi lại. Khi quá trình tìm nạp bắt đầu, hàm gọi lại sẽ hiển thị hoạt ảnh đang tải và ẩn nó sau khi nhận được dữ liệu:
getQuoteBtn.addEventListener('click', () => {
displayLoading();
fetch('https://api.quotable.io/random')
.then((response) => {
return response.json();
})
.then((data) => {
hideLoading();
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
quote.innerHTML = data.content;
author.innerHTML = data.author;
});
});
Kết luận
Trong bài viết này, chúng ta đã học cách sử dụng vanilla JavaScript để tạo hoạt ảnh đang tải và hiển thị nó một cách thích hợp. Chúng tôi đã xem xét các cách tiếp cận khác nhau để thực hiện điều này và đã xem xét một số trường hợp sử dụng khác nhau cho hoạt ảnh tải. Chúng tôi đã chọn sử dụng hình tròn xoay làm bộ tải, nhưng bạn có thể thay đổi nó theo bất kỳ cách nào bạn có thể muốn - hãy tự tạo GIF hoặc trình tải động CSS.
