आईई 8 में पैन/ज़ूम दर्दनाक रूप से धीमा है RaphaelJS

Question

मैं थोड़ी देर के लिए इस सीट मैपिंग चार्ट को प्राप्त करने पर काम कर रहा हूं और कुछ पुनरावृत्तियों का निर्माण किया है, और जब मैं आईई 8 प्राप्त करता हूं तो यह समस्या है कि इस के लिए पैनिंग धीमा और देरी

लोड समय पर कटौती करने के लिए मेरे पास जो कुछ है, वह मेरे "स्ट्रोक" को प्रतिस्थापित करने के लिए एक पीएनजी बनाया गया है, क्योंकि मुझे लगता है कि यानी 8 मानचित्र को खींचने पर हर बार फिर से प्रस्तुत करना चाहता था।

मैंने आईई 8 उपयोगकर्ताओं को इस विकल्प को मजबूर करने की उम्मीद रखने वाले नियंत्रण भी जोड़े हैं, लेकिन अभी भी पैन में देरी है, और यदि मेरे पास IE8 (और यदि संभव हो तो 7) के साथ उपयोगकर्ता हो सकते हैं तो नियंत्रण और प्रतिक्रिया के बिना अभी भी खींचें/पैन थोड़ा तेज़ समय होगा जो बहुत अच्छा होगा।

Here is my current JSFiddle

मैं तो यह बहुत सराहना की जाएगी अगर आप किसी भी सुझाव है अभी भी जे एस के साथ एक छोटे से हरे रंग की हूँ। (पी एस क्रोम फ्रेम भयानक है, लेकिन एक विकल्प मेरे लिए नहीं है)

अद्यतन

मैं मूल खींचने समारोह हटा दिया और jQueryUI के खींचने योग्य समारोह का उपयोग कर कोड बदल दिया है। मार्टिन ने सिर्फ div को खींचने का सुझाव दिया था, न कि राफेल तत्वों। ऐसा करने से यह चीज़ IE6-8 में उड़ जाती है जो कि बहुत अच्छी है, लेकिन फिर स्केलिंग के बारे में मेरी चिंता आई। जो मैं अपने पेपर तत्व ज़ूम पर ज़ूम करने से पहले देख रहा था, डब्ल्यूएक्सएच एक ही अनुपात में रहेगा, जब मैंने ज़ूम किया था तो मेरे ड्राइंग को काट दिया। राफेल दस्तावेज के माध्यम से खोदने के बाद मैं पेपर.सेट आकार में आया। सेटसाइज बिल्कुल वही था जो मुझे इस परियोजना को यानी 6-8 में घुमाने और नाली करने की अनुमति देने के लिए आवश्यक था और अपने रास्ते में सभी ब्राउज़रों को काफी हद तक जीतने की आवश्यकता थी।

तो संक्षेप में, jqueryui के ड्रैगगेबल और paper.setSize का उपयोग करके मेरे क्रॉस ब्राउज़र ज़ूम एन 'पैन ब्लूज़ ठीक हो गए हैं।

Answer 1

क्या फिडल में देखा जा सकता से, आप एक mousemove ईवेंट हैंडलर के अंदर .translate() फोन करके छवि का एक नया प्रतिपादन ट्रिगर कर रहे हैं: सभी ब्राउज़रों में प्रदर्शन के लिए विषाक्त है

mapContainer.translate(currentMapPosX, currentMapPosY); 
rsrGroupies.translate(currentMapPosX, currentMapPosY); 

यह दृष्टिकोण, चलो अकेले आईई 8। आईई 8 में वीएमएल से निपटने पर आपको यह समझना चाहिए कि छवि के अंदर प्रत्येक डीओएम परिवर्तन के परिणामस्वरूप छवि फिर से प्रस्तुत की जाएगी। ऐसा करना जबकि पैनिंग हमेशा दर्दनाक धीमी होगी।

मुझे लगता है कि आप पहले से ही अपने पहेली में jQuery का उपयोग कर रहे हैं। यदि आप अपने पैनिंग के प्रदर्शन में वृद्धि करना चाहते हैं, तो आपको निम्नलिखित करने पर विचार करना चाहिए:

1. वर्तमान ज़ूम स्तर के लिए बिल्कुल एक बार राफेल में छवि प्रस्तुत करें। पैनिंग करते समय किसी भी समय अपने वीएमएल/एसवीजी छवि में परिवर्तनों को बदलने का प्रयास न करें।
2. mousemove पैनिंग के कार्यान्वयन के साथ आपके पास पहले से ही है, एचटीएमएल कंटेनर को स्थानांतरित या स्क्रॉल करें जिसमें आपकी वीएमएल/एसवीजी छवि है। <div>overflow: hidden के साथ कल्पना करें और छवि को अपेक्षाकृत अंदर ले जाएं, या उपयुक्त स्थिति पर स्क्रॉल करें।

इसके लिए आपके समन्वय गणनाओं के कुछ समायोजन की आवश्यकता होगी, लेकिन यह सभी ब्राउज़रों में आपके प्रदर्शन को बेहतर बनाएगा।