Home » Thủ thuật blog
Kỹ thuật load ảnh trước bằng CSS
Chủ Nhật, 19 tháng 7, 2009

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.

- Hiệu ứng thay đổi tiêu đề cho blog theo thời gian
- Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng
- Ẩn phần comment cho 1 bài viết nhất định
- Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)
- Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment
- Trang trí các widget
- 1 Sript đổi màu background khá hay
- Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung
- Một ứng dụng của lệnh position : Chèn tiện ích vào banner (Header)
- Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên
- [ Yêu cầu ] : Giới hạn việc xem blog cho trình duyệt IE
- [ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog
Comments[ 0 ]
Đăng nhận xét