Bir resim tarayıcıya herhangi bir şekilde yüklendikten sonra, tarayıcı önbelleğinde olacak ve bir sonraki kullanımda, bu kullanım mevcut sayfada veya resim olduğu sürece başka herhangi bir sayfada çok daha hızlı yüklenecektir. tarayıcı önbelleğinden süresi dolmadan önce kullanılır.
Dolayısıyla, görüntüleri önbelleğe almak için yapmanız gereken tek şey onları tarayıcıya yüklemek. Bir grup görüntüyü önbelleğe almak istiyorsanız, javascript'ten yapıldığında genellikle sayfa yüklemesini durdurmayacağı için muhtemelen en iyisi bunu javascript ile yapmaktır. Bunu şu şekilde yapabilirsiniz:
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"]);
Bu işlev istediğiniz kadar çağrılabilir ve her seferinde önbelleğe daha fazla görüntü ekler.
Resimler javascript aracılığıyla bu şekilde önceden yüklendikten sonra, tarayıcı bunları önbelleğinde tutar ve başka yerlerdeki (web sayfalarınızdaki) normal URL'lere başvurabilirsiniz ve tarayıcı bu URL'yi önbelleğinden alır. ağ.
Zamanla, tarayıcı önbelleği bir süredir kullanılmayan en eski şeyleri doldurabilir ve fırlatabilir. Sonuç olarak, görüntüler önbellekten temizlenir, ancak bir süre orada kalmaları gerekir (önbelleğin ne kadar büyük olduğuna ve diğer taramanın ne kadar yapıldığına bağlı olarak). Görüntüler her defasında yeniden önceden yüklendiğinde veya bir web sayfasında kullanıldığında, tarayıcı önbelleğindeki konumlarını otomatik olarak yeniler, böylece önbellekten çıkmaları daha az olasıdır.
Tarayıcı önbelleği sayfalar arasıdır, bu nedenle tarayıcıya yüklenen herhangi bir sayfa için çalışır. Böylece, sitenizde tek bir yerde önbelleğe alabilirsiniz ve ardından tarayıcı önbelleği sitenizdeki diğer tüm sayfalarda çalışacaktır.
Yukarıdaki gibi önden eklerken, resimler eşzamansız olarak yüklenir, böylece sayfanızın yüklenmesini veya görüntülenmesini engellemezler. Ancak, sayfanızın kendine ait çok sayıda görüntüsü varsa, bu önbellek görüntüleri bant genişliği veya sayfanızda görüntülenen görüntülerle bağlantılar için rekabet edebilir. Normalde, bu göze çarpan bir sorun değildir, ancak yavaş bir bağlantıda bu önleme, ana sayfanın yüklenmesini yavaşlatabilir. Önceden yüklenmiş görüntülerin en son yüklenmesi tamamsa, diğer tüm sayfa kaynakları zaten yüklenene kadar ön yüklemeyi başlatmak için bekleyecek bir işlev sürümü kullanabilirsiniz.
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);