Kỹ thuật tải ảnh trước bằng CSS. Trong file CSS của bạn có sử dụng đến một số ảnh background, nhưngnhữ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 chúng ta lần đầu tiên khi vào trang Web.
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ụngcho thuộc tính :hover . KHi lần đầu tiên bạn vào Website khi hover chuột lênthẻ <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áptả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ướcvề 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 CSScủ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ạnthẻ <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
10:07 28/07/25
