Chúng ta lấy một ví dụ như sau: Giả sử rằng trong thẻ <a> của
bạn có sử dụng hai ảnh, một ảnh làm dùng để hiển thị ngay từ đầu, còn
một ảnh khác sử dụng cho thuộc tính :hover. KHi lần đầu tiên bạn vào Website khi hover
chuột lên thẻ <a> đó thì nó sẽ không hiển thị anh thử hai ngay mà
sau một khoảng thời gian khoảng 2 đến 3 giây sau thì mới hiện tùy theo
tốc độ đường truyền.
Để khắc phục điều đó chúng ta có một thủ thuật (tips) nhỏ như sau:
Đối với một số ảnh mà chúng ta cần sử dụng làm background trong file
css, mà chúng ta không muốn có độ trễ như ví dụ trên thì chúng ta cần
có biện pháp tải trước những ảnh đó về máy.
Chúng ta sẽ đặt toàn bộ các ảnh mà muốn tải trước về vào trong một thẻ CSS như sau:
#preLoadImages {
width: 0px;
height: 0px;
background: url(../images/anh1.gif);
background: url(../images/anh2.gif);
background: url(../images/anh3.gif);
...
}
Bạn có thể đặt đoạn mã CSS trên vào trong file CSS của bạn, hoặc đặt vào trong thẻ <head> của trang. Ví dụ
<html>
<head>
<style type="text/css">
#preLoadImages {
width: 0px;
height: 0px;
background: url(../images/anh1.gif);
background: url(../images/anh2.gif);
background: url(../images/anh3.gif);
...
}
</style>
</head>
Sau đó chúng ta đặt đoạn thẻ <div id="prLoadImages"> trên vào ngay dưới thẻ <body> của Website
của bạn. Khi trình duyệt đọc tới thẻ <div> đó nó sẽ load 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.
<body>
<div id="preLoadImages"></div>
...
Theo cssyeah
 "Tìm hiểu Vũ trụ mênh mông huyền bí" www.bachkhoatrithuc.vn
|
