Làm Favicon động cho trang

Cùng với sự phát triển chóng mặt của các framework front end thì hiện web SPA đang rất thịnh hành, ưu điểm của SPA là page không reload mà chỉ render lại các vùng cần thay đổi, do đó hiếm khi chúng ta nhìn thấy icon loading ở các tab xuất hiện, trái lại chúng ta sẽ có 1 khoảng thời gian nhỏ trong thời gian khởi tạo và render các components hoặc đơn giản là thời gian thực thi các logic trong middleware giữa các routes.

Để tránh sự nhàm chán cho user, hiện tại có rất nhiều kiểu giao diện loading được tạo ra nhằm cải thiện UX khi sử dụng ứng dụng web một cách phong phú nhất có thể. Trong số đó có thể kể đến như progress bar, loading spinner, content placeholder,.. rất rất nhiều; và mỗi thư viện lại dùng vào những tình huống riêng.

Bài viết hôm nay mình sẽ dựa trên ý tưởng icon loading của trình duyệt đầu mỗi tab khi tải trang.

Hoàn cảnh hiện tại

• Có thể tác động lên trình duyệt để icon loading xuất hiện hay không? Câu trả lời là không.
• Có thể dùng ảnh .gif làm favicon rổi replace ảnh đó khi đang loading không? Câu trả lời là… hiện chỉ có trình duyệt Firefox là hỗ trợ việc này. Các trình duyệt khác thì không, kể cả Chrome.

Vậy là chúng ta phải tự thân vận động với javascript rồi.

Ý tưởng

Có rất nhiều ý tưởng có thể áp dụng như:

• Draw một hình tròn, khuyết 1 góc bằng canvas sau đó convert sang dataURL, rồi set data đó vào href của favicon, sau đó draw một hình tròn khác, xoay đi 1 góc và lại set lại href.
• Kiếm một cái ảnh thay vì tự vẽ ra, rồi làm như trên.
• Vẽ nhiều hình ảnh spiner liên tục và thay đổi href liên tục để tạo hiệu ứng loading.

Và mình sẽ chọn cách thứ 3 nhé. Nguyên nhân thì chắt lát nữa làm xong các bạn sẽ đoán được, tuy nhiên còn 1 nguyên nhân nữa là nó khá đơn giản.

Số lượng hình ảnh mình sẽ tạo ra ở đây là 24 – nếu bạn thắc mắc thì mình lấy theo con số fps (frame per second) của film phổ biến hiện nay là 24fps