Hiệu ứng di chuột qua/di chuyển chậm trên IE8

Question

Tôi đã nhận thấy một điều hoạt động lạ trong IE8 khi sử dụng các sự kiện di chuột trên một bảng có nhiều hàng (100 trong ví dụ này). Tôi đã thử rất nhiều cách tiếp cận khác nhau nhưng tôi dường như không tìm được cách nào để có được nó nhanh như tôi thích/cần.

Nếu tôi chuyển đổi các lớp trên mỗi sự kiện thì hiệu suất sẽ giảm xuống trong tất cả các phiên bản IE và Nếu tôi sử dụng thao tác trực tiếp CSS thông qua javascript IE6 và IE7 tăng tốc rất nhiều, nhưng IE8 vẫn hoạt động tệ hại.

Bất kỳ ý tưởng nào? Tôi thực sự muốn biết điều gì làm cho sự kiện di chuột qua thực hiện quá chậm chạp so với tất cả các trình duyệt khác.

Nếu điều này chỉ xảy ra với IE6 tôi có thể hiểu và bỏ qua, nhưng khi phiên bản mới nhất của trình duyệt là phiên bản chậm nhất, sẽ chỉ có ngày càng nhiều người dùng có trải nghiệm xấu.

Ví dụ sử dụng JQuery hover: http://thedungheap.net/research/

EDIT: bây giờ tôi đã cập nhật ví dụ để nó rất dễ dàng để thấy sự khác biệt giữa có 10 dòng và 200. Đây là trong cùng một tài liệu, vì vậy đây có thể không là một vấn đề với toàn bộ kích thước DOM, tôi đoán

Answer 1

Btw cho tất cả các trình duyệt bạn có thể sử dụng: bộ chọn di chuột chỉ sử dụng css. Và chỉ cho IE6 bạn có thể thêm soluton nhanh nhất của bạn.

Answer 2

Bạn đã thử xem điều gì sẽ xảy ra nếu bạn chỉ có một hàng trên mỗi hàng? Tò mò nếu đó là số phần tử trong DOM [hoặc trong mỗi hàng] có thể ảnh hưởng đến hiệu suất. Nếu không, nó có thể là một vấn đề với cách ie8 đi qua các thẻ trong công cụ chọn. Không thực sự là một câu trả lời, nhưng một cái gì đó để thử.

Không có IE8 hoặc tôi tự mình thử.

Answer 3

Có vẻ đủ nhanh với tôi, mà không thực sự xem xét số liệu.

Bạn có thể thử di chuột qua/di chuột thay vì chuyển đổi. Bạn cũng có thể thử đoàn sự kiện, mà thường giúp với nhiều yếu tố này trong dom.

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

Answer 4

Hãy thử sử dụng bong bóng sự kiện. Chỉ thêm sự kiện di chuột vào bảng và sau đó xem phần tử đích.

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

Answer 5

tôi đã phải đối mặt với vấn đề này và thực hiện các workaround sau

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",""); 
}); 

Tôi hy vọng điều này có thể hữu ích cho bạn.

Answer 6

: hover IS rất chậm trên IE8, bất kể bạn dự định triển khai nó như thế nào.Trong thực tế, javascript onmouseover, onmouseout sự kiện cung cấp phương pháp cách nhanh hơn để tạo ra một hiệu ứng di chuột, hơn CSS làm

dụ nhanh nhất trên IE8:

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

chậm dụ:

<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> 

Ví dụ rất chậm: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

Xin lỗi vì đã đăng bài trên một câu trả lời này cũ nhưng tôi nghĩ rằng nó có liên quan và trang này cũng xếp hạng của google như vậy ...

Wow, tôi chỉ cần bỏ ra một lượng lớn thời gian về vấn đề này vấn đề, tôi đã cố gắng sử dụng Javascript, nhưng nó vẫn còn chậm.

Đây là một giải pháp nếu bạn sử dụng nền hình ảnh:

Đây là một vấn đề thực sự đối với tôi, vì dự án Tôi có vấn đề này trên là hiệu ứng di chuột trên trái và bên phải nút/mũi tên mà tôi sử dụng để tạo các tab ở bên trái và bên phải, các tab sẽ xuất hiện dưới các nút, trình chiếu tab nếu tôi có thể nói và khi con trỏ vào vùng nút, hình ảnh bình thường sẽ biến mất, hình ảnh bên dưới sẽ hiển thị trong vài milisec và sau đó, hình ảnh di chuột cuối cùng sẽ hiển thị, xấu xí.

Giải pháp thực tế là sử dụng hình ảnh sprites, theo cách đó hoàn toàn không có độ trễ ngay cả trong css thuần túy. Ý tưởng là có một hình ảnh đơn với tất cả các hình ảnh khác nhau chứa các trạng thái bên trong (bình thường/hover/được chọn/không hoạt động/etc), bạn đặt hình ảnh làm hình nền và bạn chỉ điều chỉnh giá trị vị trí nền cho hiệu ứng di chuột và khác.

Nếu bạn muốn biết rõ hơn về sprites css: http://css-tricks.com/css-sprites/