आईओ 8

Question

पर माउसओवर/होवर प्रभाव धीमा है मैंने कई पंक्तियों के साथ एक टेबल पर माउसओवर घटनाओं का उपयोग करते समय आईई 8 में एक अजीब प्रदर्शन की बात देखी है (इस उदाहरण में 100)। मैंने कई अलग-अलग दृष्टिकोणों की कोशिश की है, लेकिन मुझे जितनी जल्दी चाहें उतनी जल्दी पाने के लिए मुझे कोई रास्ता नहीं मिल रहा है।

यदि मैं प्रत्येक घटना पर कक्षाओं को स्विच करता हूं तो प्रदर्शन सभी आईई संस्करणों में नीचे चला जाता है, और यदि मैं जावास्क्रिप्ट आईई 6 और आईई 7 के माध्यम से सीएसएस के प्रत्यक्ष हेरफेर का उपयोग करता हूं, लेकिन आईई 8 अभी भी लुसी करता है।

कोई विचार? मैं वास्तव में जानना चाहता हूं कि यह क्या है जो माउसओवर ईवेंट को अन्य सभी ब्राउज़रों की तुलना में इतना सुस्त प्रदर्शन करने के लिए बनाता है।

यदि यह केवल आईई 6 के साथ हुआ तो मैं समझ सकता हूं और इसे पारित कर सकता हूं, लेकिन जब ब्राउज़र का नवीनतम संस्करण सबसे धीमा होता है, तो केवल बुरे अनुभव वाले अधिक से अधिक उपयोगकर्ता होने जा रहे हैं।

उदाहरण का उपयोग कर JQuery मंडराना: http://thedungheap.net/research/

संपादित करें: मैं अब उदाहरण के अद्यतन किया है इतना है कि यह 10 पंक्तियों और 200 यह एक ही दस्तावेज़ में है होने के बीच का अंतर देखना आसान है, तो यह नहीं कर सकते पूरे डोम आकार के साथ एक समस्या हो, मुझे लगता है कि

Answer 1

बीटीडब्ल्यू उन सभी ब्राउज़रों के लिए जो आप उपयोग कर सकते हैं: केवल सीएसएस का उपयोग करके होवर चयनकर्ता। और केवल आईई 6 के लिए आप अपना सबसे तेज़ सोल्यूटन जोड़ सकते हैं।

Answer 2

क्या आपने यह देखने की कोशिश की है कि क्या होता है यदि आपके पास केवल एक पंक्ति है? उत्सुक है कि यह डोम [या प्रत्येक पंक्ति में] तत्वों की संख्या प्रदर्शन को प्रभावित कर सकता है। अन्यथा, यह चयनकर्ता इंजन में IE8 ट्रैवर्स टैग के तरीके के साथ एक मुद्दा हो सकता है। वास्तव में एक जवाब नहीं है, लेकिन कोशिश करने के लिए कुछ।

कोई आईई 8 या मैं इसे स्वयं कोशिश नहीं करता।

Answer 3

वास्तव में मेट्रिक्स को देखे बिना मेरे लिए पर्याप्त तेज़ लगता है।

आप टॉगलिंग के बजाए माउसओवर/माउसआउट को आजमा सकते हैं। आप ईवेंट प्रतिनिधिमंडल को भी आजमा सकते हैं, जो अक्सर डोम में इस कई तत्वों के साथ मदद करता है।

$("tr").mouseover(function() { 
      $(this).css('backgroundColor', '#ffc000'); 
     }) 
     .mouseout(function() { 
      $(this).css('backgroundColor', '#fff'); 
     }); 

Answer 4

ईवेंट बबलिंग का उपयोग करने का प्रयास करें। होवर ईवेंट केवल तालिका में जोड़ें, और उसके बाद लक्ष्य तत्व देखें।

$(function() { 
    $('table').hover(function(e) { 
     $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000'); 
    }, function(e) { 
     $(e.originalTarget.parentNode).css('backgroundColor', '#fff'); 
    }); 
}); 

Answer 5

मैं इस मुद्दे का सामना किया और निम्नलिखित तरीके को

var viewTable = jQuery("table.MyTable"); 
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body"); 
var highlightColor = temDiv.css("background-color"); 
viewTable.mouseover(function(eventObj){ 
    jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor); 
}).mouseout(function(eventObj){ 
    jQuery(eventObj.target).parents("tr:first").css("background-color",""); 
}); 

कार्यान्वित मुझे आशा है कि यह आपके लिए उपयोगी हो सकता है है।

Answer 6

: होवर आईई 8 पर बहुत धीमा है, इससे कोई फर्क नहीं पड़ता कि आप इसे कैसे कार्यान्वित करना चाहते हैं।वास्तव में, जावास्क्रिप्ट onmouseover, घटनाओं onmouseout एक हॉवर प्रभाव पैदा करने के लिए जिस तरह से तेजी से तरीकों प्रदान करता है, की तुलना में सीएसएस IE8 पर

सबसे तेजी से उदाहरण है:

<table> 
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'"> 
    <td>foo bar</td> 
</tr> 
</table> 

धीमी उदाहरण:

<style type="text/css"> 
    tr.S1 {background-color:#000000} 
    tr.S2 {background-color:#FFFFFF} 
</style> 
<table> 
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'"> 
    <td>foo bar</td> 
</tr> 
</table> 

बहुत धीमा उदाहरण:JSFiddle

<style type="text/css"> 
    tr.S  {background-color:#000000} 
    tr.S:hover {background-color:#FFFFFF} 
</style> 
<table> 
<tr class="S"> 
    <td>foo bar</td> 
</tr> 
</table> 

Answer 7

को यह पुराने लेकिन मुझे लगता है यह प्रासंगिक है और इस पेज में अच्छी तरह से तो गूगल श्रेणी में रखा है एक जवाब पर पोस्ट ... क्षमा करें

वाह, मैंने अभी समय का एक बड़ा राशि इस पर खर्च समस्या, मैंने जावास्क्रिप्ट का उपयोग करने की कोशिश की, लेकिन यह अभी भी धीमा था।

यह एक समाधान है यदि आप पृष्ठभूमि छवियों का उपयोग करें:

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

असली समाधान छवि स्प्राइट्स का उपयोग करना था, इस तरह शुद्ध सीएसएस में बिल्कुल कोई अंतराल नहीं है। विचार है कि सभी differents छवियों के साथ एक एकल छवि है (सामान्य/होवर/चयनित/निष्क्रिय/आदि), आप छवि को पृष्ठभूमि-छवि के रूप में सेट करते हैं, और आप होवर प्रभाव के लिए पृष्ठभूमि-स्थिति मान समायोजित करते हैं और अन्य शामिल हैं।

आप CSS स्प्राइट के बारे में बेहतर जानना चाहते हैं: http://css-tricks.com/css-sprites/