इस समय मुझे दो विकल्प मिले, इस समस्या को हल करने के लिए: सभी छवियों का प्रारंभिक src डेटा बेस 64 रिक्त छवि होना चाहिए
इस विकल्प के लिए न केवल एक आधुनिक ब्राउज़र की आवश्यकता होती है, बल्कि क्लाइंट की तरफ से इसे धीमा किया जा सकता है क्योंकि ब्राउज़र को छवि का उत्पादन करने के लिए छवि डेटा को बेस -64 डिकोड करना चाहिए।
रिक्त 1x1 छवि का url होने के लिए सभी छवियों का प्रारंभिक src
यह एक ठीक चाल है बशर्ते कि सभी छवि स्लॉटों के लिए रिक्त छवि URL बिल्कुल एक ही URL है और यह HTTP हेडर "कैश-कंट्रोल" में परिभाषित एक लंबा कैश जीवनकाल है। इसके साथ समस्या यह है कि जैसे-जैसे नई छवि फ़ाइलें लोड होती हैं, छवि वर्ग नए आकार में कूद जाएगा, जो उपयोगकर्ता के अनुभव को उतना अद्भुत नहीं बना सकता है।
लगभग सही विचार यह है ...
जब पृष्ठ शुरू होता है, तो निश्चित आकार के बक्से के साथ एक ग्रिड पेश करें जो प्रत्येक छवि को समायोजित कर सकता है। यदि स्क्रीन पर पूरा ग्रिड फिट नहीं है तो यह ठीक है। फिर जावास्क्रिप्ट लोड करें जो HTML लोड होने के बाद निष्पादित होती है, और उस जावास्क्रिप्ट में, एक नया छवि तत्व बनाएं और इसे ग्रिड के प्रत्येक सेल में संलग्न करें फिर छवि के स्रोत को सही छवि फ़ाइल में सेट करें। ऐसा तब तक करें जब तक कि पहली स्क्रीन भर न जाए। फिर जावास्क्रिप्ट के भीतर स्क्रॉलिंग का पता लगाएं और फिर जब स्क्रॉलिंग होती है, तो नई कोशिकाओं के लिए उपरोक्त प्रक्रिया दोहराएं।
अब यदि आप सबसे अच्छा चाहते हैं, और गुणवत्ता बहुत बड़ी चिंता का विषय नहीं है, तो मैं जो सलाह देता हूं (कि मैंने अपनी साइट पर भी लागू किया है) एक ग्रिड का निर्माण और इसे ऐसे सेट करना है कि उस ग्रिड की पृष्ठभूमि छवि एक हो छवियों के वर्गों के रूप में स्वरूपित सभी छवियों की स्प्राइट शीट। सभी छवियों के लिए एक अनुरोध आवश्यक होने के बाद से यह विधि लचीली और लोड करने के लिए तेज़ है।
यदि आप तेज़ मार्ग पर जाना चाहते हैं, तो इसका उपयोग करने के लिए एक टेम्पलेट HTML है। केवल दो अनुरोध किए गए हैं। HTML कोड, और एक छवि। इस कोड में, मुझे लगता है कि शीट से प्रत्येक छवि चौड़ाई में 100 पिक्सेल और ऊंचाई में 200 पिक्सेल है और प्रत्येक छवि पूरी तरह से बिना अंतराल के एक दूसरे के बगल में गठबंधन की गई है।
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
अपने कोड में मैंने 3 डॉट जोड़े। इसका मतलब है कि आप संख्याओं को बढ़ाकर और हर बार 100 की स्थिति बढ़ाकर छवियों को जोड़ सकते हैं बशर्ते कि आपकी स्प्राइट शीट में छवियों की केवल एक पंक्ति हो। साथ ही, ओपेरा जैसे कुछ ब्राउज़रों के साथ, आपको उन्हें काम करने के लिए पृष्ठभूमि स्थिति मूल्यों के सामने एक नकारात्मक संकेत जोड़ने की आवश्यकता हो सकती है।