2011-08-22 17 views
5

मैं एक आईफ़्रेम तत्व के चारों ओर एक jQuery UI संवाद बना रहा हूं और ऐसा करने का प्रदर्शन गंभीर रूप से प्रभावित हुआ है। समस्या तब प्रकट होती है जब आप बहुत तेजी से संवाद को स्थानांतरित करते हैं जो आपके माउस को iframe तत्व पर जाने का कारण बनता है, पूरा पृष्ठ एक पल के लिए लटका होगा और एक उल्लेखनीय मंदी का कारण बन जाएगा। मैंने आईफ्रेम कैप्चरिंग माउस इवेंट्स के बारे में पढ़ा है जो धीमा हो रहा है लेकिन मुझे सटीक समस्या का निर्धारण नहीं हो रहा है। मैंने mousemove और mouseover को पकड़ने और डिफ़ॉल्ट व्यवहार को रोकने की कोशिश की, कोई भाग्य नहीं।आईफ़्रेम के आसपास jQuery UI संवाद; प्रदर्शन के कारण?

किसी भी पॉइंटर्स को ट्रैक पर प्रदर्शन प्राप्त करने के लिए सराहना की जाएगी! यह भी ध्यान दें कि मैं वेबकिट का उपयोग कर रहा हूं और अन्य ब्राउज़रों के साथ संगतता की परवाह नहीं करता हूं।

उत्तर

4

मैं बस इन प्रदर्शन मुद्दों में भाग गया। संवाद को खींचने या आकार बदलने पर माउस आमतौर पर आईफ्रेम पर जायेगा। जैसा कि आपने उल्लेख किया है, उन घटनाओं को आईफ्रेम द्वारा पकड़ा जाता है जिसके परिणामस्वरूप लगी व्यवहार होता है।

jQuery ड्रैगगेबल एक "iframeFix" विकल्प प्रदान करता है जो ड्रैग करते समय iframes पर पारदर्शी div डालता है। संवाद प्लगइन इस फिक्स प्रदान नहीं करता है। Iframefix के लिए jquery-ui code पर देखकर मैं अपने संवाद के लिए प्रदर्शन समस्याओं को हल करने के लिए इसे अनुकूलित करने में सक्षम था। अपने संवाद खींचें करने के लिए कुछ इसी तरह जोड़ा जा रहा है और शुरू का आकार बदलने के/विकल्प रोक चाल करना चाहिए:

$(selector).dialog({ 
    dragStart: function (event, ui) { 
     $('iframe', this).each(function() { 
      $('<div class="ui-draggable-iframeFix" style="background: #FFF;"></div>') 
      .css({ 
       width: '100%', height: '100%', 
       position: 'absolute', opacity: '1', zIndex: 1000, overflowX: 'hidden' 
      }) 
      .css($(this).position()) 
      .appendTo($(this).offsetParent()); 
     }); 
    }, 
    dragStop: function (event, ui) { 
     $("div.ui-draggable-iframeFix").each(function() { 
     this.parentNode.removeChild(this); }); //Remove frame helpers 
     } 
}); 

मैं कोड को संशोधित किया है ताकि पारदर्शी div संवाद के साथ आकार परिवर्तन नहीं करते और उसे संवाद कंटेनर बनाम को किस स्थिति में है । खिड़की। उसे और अधिक tweaking की आवश्यकता हो सकती है। आदर्श रूप से आप इन विकल्पों को संभालने के लिए बस संवाद प्लगइन का विस्तार करेंगे। मैं जल्द ही ऐसा करूंगा।

This post jQuery मंचों पर मुझे ड्रैग करने योग्य प्लगइन फिक्स के लिए सूचक प्रदान किया गया।

+0

मुझे resizeStart और resizeStop का उपयोग करना था, लेकिन अब यह काम कर रहा है: मैं आसानी से अपने मोडल संवाद का आकार बदल सकता हूं। धन्यवाद, आपका समाधान सुरुचिपूर्ण है और पूरी तरह से काम करता है। – Germstorm

+0

ग्रेट हेल्प और मैकफील्ड का बहुत अच्छा समाधान। मैं वास्तव में आईफ्रेम के कारण प्रदर्शन और झटकेदार मुद्दा देख रहा था। +1 मेरा मामला मैंने पहली बार आपके समाधान की कोशिश की लेकिन आपके द्वारा प्रदान किए गए लिंक ने भी मेरी मदद की और समस्या को सरल - iframeFix: true के साथ हल किया गया –

संबंधित मुद्दे