Subscribe Now

Trending News

Bài viết

jQuery, Lập trình

Tạo cache cho hình ảnh đơn giản bằng jQuery

Tạo cache cho hình ảnh đơn giản bằng jQuery

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.

Slow Connection Speed Internet
Slow Connection Speed Internet

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:

jQuery

jQuery image cache

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!

Bài viết liên quan

Theo dõi
Thông báo của
guest

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận