Hôm nay mình có viết 1 tiện ích nhỏ chạy trên nền web trong đó có phần phải tải font Awesome để sử dụng một số icon từ font chữ này. Tất cả đều ổn tuy nhiên khi mặc định mình để tải cho tất cả. Vấn đề ở đây xảy ra với các trang web đã và đang sử dụng Awesome trên trang của mình thì nó sẽ bị chớp nháy 1 cái (tải lại font nó hay bị thế).
Vậy làm sao để khắc phục tình trạng này. Chắc chắn là phải viết hàm kiểm tra xem font Awesome đã được tải trước khi tiện ích này chạy. Và đây là hàm cần dùng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | (function () { var span = document.createElement('span'); span.className = 'fa'; span.style.display = 'none'; document.body.insertBefore(span, document.body.firstChild); function css(element, property) { return window.getComputedStyle(element, null).getPropertyValue(property); } if (css(span, 'font-family') === 'FontAwesome') { //Yay, Font Awesome loaded } else { //Oops, Font Awesome didn't load! } document.body.removeChild(span); })(); |
Giải thích:
Hàm này sẽ thêm 1 phần tử span đặt ở chế độ ẩn và thêm class fa (tên class mặc định của font Awesome). Tiếp đó sẽ chạy lệnh kiểm tra CSS nếu phần tử này font-family là FontAwesome thì chứng tỏ font Awesome đã được tải còn không thì ngược lại. Và sau khi check thì xóa phần tử này.
Huỳnh Mai Anh Kiệt
