Kỹ thuật load ảnh trước bằng CSS - Phim Vui lắm
vietnamese Tiếng Việt english English
Hôm nay: Thứ tư, ngày 7 tháng 05 năm 2025
Home »

Kỹ thuật load ảnh trước bằng CSS

Chủ Nhật, 19 tháng 7, 2009
[FD's BlOg] - Trong code CSS các bạn thường dùng ảnh làm background, nhưng những ảnh đó sẽ không được trình duyệt tải về trong bộ đệm (cache) trên máy ngay từ đầu, mà khi nào sử dụng đến thì nó mới được tải về. Chính vì vậy đôi khi nó sẽ sinh ra độ trễ khi lần đầu tiên các bạn vào blog. Bài viết này mình sẽ hướng dẫn các bạn khắc phục điều này.

Việc này cũng xảy ra ở blog của mình, và vấn đề này bạn Ngân (blogtruyen.com) trước kia đã có hỏi mình, nhưng mình chưa trả lời được, nay mới tìm ra cách giải quyết nó.

Mình sẽ lấy ngay ví dụ trong blog của mình. Các bạn để ý là nút Readmore ở mỗi bài viết của mình, nó được sử dụng 2 ảnh, 1 ảnh là hiển thị ngay từ ban đầu, còn ảnh thứ 2 là khi ta rê chuột nó mới hiển thị (hover). Khi bạn vào blog của mình, lúc đang load dữ liệu của blog, nếu các bạn rê chuột và nút Readmore, thì nó sẽ không hiển thị gì hết, tức là khi rê chuột vào ta có cảm giác ảnh 1 bị biến mất. Thực ra là do ảnh thứ 2 chưa được load, vì thế nó sẽ không hiển thị gì cả khi ta rê chuột vào. Đợi khoảng vài giây sau (không nhất thiết phải load hết blog) thì ta rê chuột vào mới thấy được ảnh thứ 2. Và thời gian này nhanh hay chậm tùy thuộc vào tốc độ đường truyền của bạn.

Bên dưới là ảnh mình họa cho các bạn thấy điều này:
Khi blog load chưa xong:

Khi blog đã load gần xong

Để khắc phục điều đó chúng ta có một thủ thuật nhỏ như sau, đó là cho phép các ảnh này được load trước, khi đó sẽ không xuất độ trễ giữa 2 ảnh 1 và 2 (như ví dụ đưa ở trên).
☼ Để thực hiện các bước như bên dưới :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. và chèn đoạn code CSS bên dưới vào sau dòng <head> hoặc trước dòng </head>

<style type="text/css">
#preLoadImages {
width: 0px;
height: 0px;
background: url(Link ảnh 1.gif);
background: url(Link anh 2.gif);
background: url(Link anh 3.gif);
}
</style>

- Với các link ảnh 1, link ảnh 2, link ảnh 3, ... là các ảnh sẽ được load trước. Và bạn có thể thêm bao nhiêu vào tùy bạn.

4. Tiếp tục xuống dưới, tìm tới thẻ <body> , và chèn đoạn code màu đỏ vào ngay sau nó, như bên dưới:

<body>
<div id="preLoadImages"></div>

Với việc thêm đoạn thẻ <div id="prLoadImages"> trên vào ngay dưới thẻ <body> của blog của bạn. Khi trình duyệt đọc tới thẻ <div> này, nó sẽ load trước toàn bộ những ảnh được liệt kê trong danh sách trên vào trong bộ đệm của trình duyệt. Như thế vấn đề của chúng ta được khắc phục.

5. Save template.

Theo CSSYeah

Chúc các bạn thành công.
Tags: , , ,

Comments[ 0 ]


Đăng nhận xét