एसवीजी छवि टैग प्रीलोड करने का सबसे अच्छा तरीका?

Question

मैं एक एसवीजी-आधारित विज़ुअलाइज़ेशन का निर्माण कर रहा हूं जो (आंशिक रूप से) त्वरित उत्तराधिकार में कई छवियों को दिखाने पर निर्भर करता है। छवियों को नेटवर्क से पर्याप्त तेज़ी से नहीं लाया जा सकता है, इसलिए उन्हें प्रीलोड किया जाना चाहिए।

मेरे समझ के साथ कि एसवीजी ठीक से image टैग कैश नहीं है, कम से कम प्रमुख ब्राउज़रों में है। तो जावास्क्रिप्ट प्रीबलोडिंग librairies और तकनीकें (उदाहरण के लिए this SO question) काम नहीं करेगा। (मैं स्तरित एचटीएमएल img टैग का उपयोग का सहारा सकता है, लेकिन क्योंकि अपने आवेदन की बारीकियों की, मैं जितना संभव हो उतना शुद्ध एसवीजी पर कायम करना चाहते हैं)

मैं दो विकल्प देखेंगे:

• एन्कोडिंग बेस 64 के रूप में PNG छवि डेटा, तारों के रूप में स्मृति में भंडारण और तार का उपयोग कर iteratively data:image/png;base64 का उपयोग कर image टैग को भरने के लिए।
• display: none या visibility: hidden करने के लिए सभी के साथ एक दूसरे के ऊपर है, लेकिन एक सेट पर कई एसवीजी समूहों Layering और iteratively उपयुक्त समूह दिखाते समय। हालांकि, मेरा मानना ​​है कि कार्यक्रमिक रूप से यह पता लगाना संभव नहीं होगा कि सभी छवियों ने प्रीलोडिंग समाप्त कर दी है।

छवि डेटा पहले से लोड करने के लिए सबसे अच्छा तरीका क्या है? शायद मैं एक आसान विकल्प याद किया है।

Answer 1

मैं परिचित नहीं वेब ब्राउज़र के अंतर्निहित यांत्रिकी के साथ जानना चाहते हैं कि इस svg साथ image टैग काम करेंगे हूँ, लेकिन मैं सफलता नई छवि के साथ छवियों कैशिंग() था:

//download low quality images 
    var imageArray = [] 
    for (var i = 0; i < 600; i++){ 
     imageArray[i] = new Image(); 
     imageArray[i].src = moviePath + (i + 1) + '.jpg.t'; 
     imageArray[i].onload = function(){ 
      var i = this.src.split(movieName + '/')[1].split(".")[0]; 
      d3.select("#bar" + i).style("stroke", 'rgb(' + colors[i].rgb + ')'); 
     } 
    } 

एक दिखाने के लिए छवि, मैंने बस प्रदर्शित छवि का स्रोत पहले से लोड किया था और ब्राउजर इसे अपने कैश से लोड करता है।

source में बाद में एक और छोटी सी चाल का उपयोग किया जाता है - पहले एक निम्न गुणवत्ता वाली छवि दिखाएं और एक छोटी छवि को लोड करने के बाद केवल एक छोटी छवि को लोड करने के बाद एक और छवि का चयन किया जा रहा है। फिर, उच्च गुणवत्ता वाली छवि लोड होने के बाद, इसे केवल तभी दिखाएं जब एक ही छवि अभी भी चुनी गई हो।

कोई विचार करता है, तो इन सर्वोत्तम प्रथाओं या कुछ भी है, लेकिन it worked reasonably well हैं।