ब्राउज़र में किसी भी तरह से एक छवि लोड हो जाने के बाद, यह ब्राउज़र कैश में होगा और अगली बार इसका उपयोग तब किया जाएगा जब यह उपयोग वर्तमान पृष्ठ में हो या किसी अन्य पृष्ठ में क्योंकि ब्राउज़र कैश से समाप्त होने से पहले छवि का उपयोग किया जाता है।
तो, छवियों को सटीक करने के लिए, आपको बस उन्हें ब्राउज़र में लोड करना है। यदि आप छवियों का एक गुच्छा सटीक करना चाहते हैं, तो जावास्क्रिप्ट से ऐसा करना सबसे अच्छा है क्योंकि यह आमतौर पर जावास्क्रिप्ट से किए गए पृष्ठ लोड को नहीं रखेगा। आप क्या कर सकते हैं कि इस तरह:
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) {
// remove image from the array once it's loaded
// for memory consumption reasons
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
इस समारोह में कई बार के रूप में कहा जा सकता है के रूप में आप चाहते हैं और हर बार, यह सिर्फ precache को अधिक छवियों जोड़ देगा।
एक बार छवियों को जावास्क्रिप्ट के माध्यम से इस तरह से पहले से लोड किया गया है, तो ब्राउज़र उन्हें अपने कैश में रखेगा और आप केवल अन्य स्थानों (अपने वेब पृष्ठों में) के सामान्य यूआरएल का उल्लेख कर सकते हैं और ब्राउज़र उस यूआरएल को अपने कैश से लाएगा नेटवर्क के बजाय।
आखिरकार समय के साथ, ब्राउज़र कैश थोड़ी देर में उपयोग नहीं की जाने वाली सबसे पुरानी चीजों को भर सकता है और टॉस कर सकता है। तो आखिरकार, छवियों को कैश से बाहर कर दिया जाएगा, लेकिन उन्हें थोड़ी देर के लिए वहां रहना चाहिए (इस पर निर्भर करता है कि कैश कितना बड़ा है और कितनी अन्य ब्राउज़िंग की जाती है)। हर बार छवियों को वास्तव में फिर से लोड किया जाता है या किसी वेब पेज में उपयोग किया जाता है, यह स्वचालित रूप से ब्राउज़र कैश में अपनी स्थिति को रीफ्रेश करता है ताकि उन्हें कैश से बाहर निकलने की संभावना कम हो।
ब्राउज़र कैश क्रॉस-पेज है, इसलिए यह ब्राउज़र में लोड किए गए किसी भी पृष्ठ के लिए काम करता है। तो आप अपनी साइट में एक ही स्थान पर सटीक हो सकते हैं और ब्राउज़र कैश तब आपकी साइट के सभी अन्य पृष्ठों के लिए काम करेगा।
जब जैसा कि ऊपर precaching, छवियों एसिंक्रोनस रूप से लोड किए गए हैं ताकि वे लोड हो रहा है या अपने पेज का प्रदर्शन बंद नहीं होंगे। लेकिन, अगर आपके पृष्ठ में अपनी कई छवियां हैं, तो ये सटीक छवियां आपके पृष्ठ में प्रदर्शित छवियों के साथ बैंडविड्थ या कनेक्शन के लिए प्रतिस्पर्धा कर सकती हैं। आम तौर पर, यह एक उल्लेखनीय मुद्दा नहीं है, लेकिन धीमे कनेक्शन पर, यह सटीक मुख्य पृष्ठ की लोडिंग को धीमा कर सकता है। यदि प्रीलोड छवियों को अंतिम रूप से लोड करने के लिए ठीक था, तो आप फ़ंक्शन के एक संस्करण का उपयोग कर सकते हैं जो प्रीलोडिंग शुरू करने के लिए प्रतीक्षा करेगा जब तक कि अन्य सभी पृष्ठ संसाधन पहले ही लोड नहीं हो जाते थे।
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();
});
// in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
// then preload the images anyway after some timeout time
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) {
// remove image from the array once it's loaded
// for memory consumption reasons
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);
आप नहीं है। ब्राउज़र करता है। – Pointy
ब्राउज़र कैश छवियों को स्वचालित रूप से करता है? –
@ लॉगन: हां, ब्राउजर स्वचालित रूप से छवियों को कैश करता है, बशर्ते आपका सर्वर ब्राउज़र को बताने के लिए आवश्यक हेडर भेजता है, इसे कैश करने के लिए सुरक्षित है। (ये हेडर ब्राउज़र को समाप्ति समय भी बता सकते हैं, जो आपके प्रश्न का हिस्सा है।) – icktoofay