Chào các bạn, tiếp theo bài viết Lazy load images, hôm nay mình sẽ chia sẻ cho các bạn một phương pháp tạo cache cho hình ảnh website bằng jQuery rất đơn giản và hiệu quả.
Có lẽ có nhiều bạn vẫn luôn thắc mắc sao website đã tối ưu code hết cỡ, hosting siêu mạnh nhưng website vẫn như rùa cõng ốc sên. Vậy làm sao để khắc phục? Nếu bạn là một người có máu nhiếp ảnh gia, luôn muốn website mình có những hình ảnh đẹp lung link và chất lượng phải good good good thì điều này là nguyên nhân chính làm cho website của bạn ì ạch.
Việc website có quá nhiều hình ảnh “chất lượng cao” đồng nghĩa với dung lượng của một page chứa những hình ảnh đó tăng lên, mà nếu dùng wifi chùa nhà hàng xóm Test Speed tính bằng KB thì công việc cho trình duyệt load website của bạn rất cực nhọc. Vì thế phương pháp tạo cache cho hình ảnh là một trong những cách làm tăng tốc độ load website của bạn lên nhanh chóng.
1. Chuẩn bị thư viện:
2. Viết code:
Bạn có thể tạo file js rồi gọi vào hoặc viết trực tiếp trong thẻ <script>…</script>
// Thêm class 'imageCache' vào tất cả hình ảnh trên website
$('img').each(function () {
$(this).addClass("imageCache");
});
// Gọi hàm image cache
$(function () {
$('img.imageCache').imageCache();
});
Thế là xong, nhớ gọi 2 thư viện trên vào trước </body> nhé, giờ thì bạn hãy xóa cache trình duyệt và trải nghiệm thôi, chúc các bạn thành công!