Khi hình ảnh đã được tải theo bất kỳ cách nào vào trình duyệt, nó sẽ nằm trong bộ nhớ cache của trình duyệt và sẽ tải nhanh hơn nhiều vào lần sử dụng tiếp theo cho dù việc sử dụng đó là trong trang hiện tại hay trong bất kỳ trang nào khác miễn là hình ảnh đó được sử dụng trước khi hết hạn khỏi bộ nhớ cache của trình duyệt.
Vì vậy, để lọc trước hình ảnh, tất cả những gì bạn phải làm là tải chúng vào trình duyệt. Nếu bạn muốn xử lý trước một loạt hình ảnh, có lẽ tốt nhất là bạn nên làm điều đó với javascript vì nó thường không giữ tải trang khi thực hiện từ javascript. Bạn có thể làm như thế này:
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
Hàm này có thể được gọi bao nhiêu lần tùy thích và mỗi lần, nó sẽ chỉ thêm nhiều hình ảnh vào bộ đệm trước.
Khi các hình ảnh đã được tải trước như thế này qua javascript, trình duyệt sẽ có chúng trong bộ nhớ cache của nó và bạn chỉ có thể tham khảo các URL bình thường ở những nơi khác (trong các trang web của bạn) và trình duyệt sẽ tìm nạp URL đó từ bộ nhớ cache của nó thay vì qua mạng lưới.
Cuối cùng theo thời gian, bộ nhớ cache của trình duyệt có thể lấp đầy và quăng những thứ cũ nhất chưa được sử dụng trong một thời gian. Vì vậy, cuối cùng, hình ảnh sẽ bị xóa khỏi bộ nhớ cache, nhưng chúng sẽ ở đó trong một thời gian (tùy thuộc vào dung lượng bộ nhớ cache và mức độ duyệt web khác được thực hiện). Mỗi khi hình ảnh thực sự được tải lại trước hoặc được sử dụng trong một trang web, nó sẽ tự động làm mới vị trí của chúng trong bộ nhớ cache của trình duyệt để chúng ít có khả năng bị xóa khỏi bộ nhớ cache hơn.
Bộ nhớ đệm của trình duyệt là bộ nhớ đệm chéo trang nên nó hoạt động cho bất kỳ trang nào được tải vào trình duyệt. Vì vậy, bạn có thể chọn trước ở một nơi trong trang web của mình và bộ nhớ cache của trình duyệt sau đó sẽ hoạt động cho tất cả các trang khác trên trang web của bạn.
Khi cắt bỏ như trên, hình ảnh được tải không đồng bộ nên chúng sẽ không chặn việc tải hoặc hiển thị trang của bạn. Tuy nhiên, nếu trang của bạn có nhiều hình ảnh riêng, thì những hình ảnh bộ đệm trước này có thể cạnh tranh về băng thông hoặc kết nối với hình ảnh được hiển thị trong trang của bạn. Thông thường, đây không phải là một vấn đề đáng chú ý, nhưng trên kết nối chậm, việc cắt bỏ này có thể làm chậm quá trình tải trang chính. Nếu hình ảnh tải trước được tải sau cùng là OK, thì bạn có thể sử dụng một phiên bản của chức năng sẽ đợi để bắt đầu tải trước cho đến khi tất cả các tài nguyên trang khác đã được tải xong.
function preloadImages(array, waitForOtherResources, timeout) {
var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
if (!preloadImages.list) {
preloadImages.list = [];
}
if (!waitForOtherResources || document.readyState === 'complete') {
loadNow();
} else {
window.addEventListener("load", function() {
clearTimeout(timer);
loadNow();
});
timer = setTimeout(loadNow, t);
}
function loadNow() {
if (!loaded) {
loaded = true;
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.onload = img.onerror = img.onabort = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = imgs[i];
}
}
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"], true);
preloadImages(["url99.jpg", "url98.jpg"], true);