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.
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
Comments[ 0 ]
Đăng nhận xét