#13970 closed bug (notabug)
slow fadeIn / fadeOut make browsing painful
| Reported by: | Owned by: | ||
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.10.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Hello,
with my desktop (config. below), jQuery fadeIn / fadeOut can take up to 9 seconds (maximum value, really measured with a stop-watch). As Firefox is completely frozen in the meantime, this makes browsing extremely painful on any website using animated images (included header/advertizing banners).
Config:
Debian squeeze distribution
Firefox from Debian squeeze-backports: Mozilla/5.0 (X11; Linux x86_64; rv:10.0.12) Gecko/20100101 Firefox/10.0.12 Iceweasel/10.0.12
ATI radeon r300 graphic card (yes, this is old, but more than enough for bloody webpage browsing)
Test case (minimized from real-life example www.senat.fr):
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <link rel="stylesheet" type="text/css" href="base.css">
</head> <body>
<div id="header"> </div> <script src="base.js" type="text/javascript"></script>
</body> </html>
where base.js is (I snipped compressed jQuery, tested with your original v1.10.1 download):
/*! jQuery v1.10.1 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license @ sourceMappingURL=jquery-1.10.1.min.map */ /*
- JQUERY COMPRESSED CODE WAS HERE
- */
jQuery(document).ready(function(){
animateHeader();
});
var rand_value = 1; var rand_items = 13; function animateHeader() {
if(jQuery('#header #background').length < 1 ){
jQuery('#header').append('<div id="background"></div>');
} jQuery('#header #background').fadeOut('slow', function(){
if(rand_value > rand_items)
rand_value = 1;
jQuery('#header #background').removeClass(); jQuery('#header #background').addClass('background-'+rand_value+); jQuery('#header #background').fadeIn('slow');
rand_value++;
});
setTimeout("animateHeader()",8000);
}
and base.css is:
body {
font-family: "Times New Roman", Times, serif; font-size: 87.5%; /* :INFO:1em = 14px */ text-align: center; margin: 0; height: 100%; color: #545454; background: #d1dae0; width: 962px; min-height: 400px; height: auto !important; height: 400px;
}
#background {
position: absolute; z-index: 1; left: 0; top: 0; height: 147px; width: 982px; background-image: url(background.jpg); /* width: 982px, height: 1911px */ background-repeat: no-repeat;
}
.background-1 {
background-position: 0 0;
} .background-2 {
background-position: 0 -147px;
} .background-3 {
background-position: 0 -294px;
} .background-4 {
background-position: 0 -441px;
} .background-5 {
background-position: 0 -588px;
} .background-6 {
background-position: 0 -735px;
} .background-7 {
background-position: 0 -882px;
} .background-8 {
background-position: 0 -1029px;
} .background-9 {
background-position: 0 -1176px;
} .background-10 {
background-position: 0 -1323px;
} .background-11 {
background-position: 0 -1470px;
} .background-12 {
background-position: 0 -1617px;
} .background-13 {
background-position: 0 -1764px;
}
Change History (3)
comment:1 Changed 7 years ago by
| Resolution: | → notabug |
|---|---|
| Status: | new → closed |
comment:2 Changed 7 years ago by
So, fundamentally, jQuery is DOSing an end-user computer by not adapting its redraw rate to the hardware, and this is not a bug? Really? Next time, I won't waste my time producing a minimal test case.
comment:3 Changed 7 years ago by
Your test case will be fine for getting help on the forum, at least as a starting place. The jQuery core team can't provide personalized help for every person who writes code that doesn't work right. You haven't reduced that code to the point where you've proven there is a bug in jQuery.
Please ask for help on a forum.