Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#13970 closed bug (notabug)

slow fadeIn / fadeOut make browsing painful

Reported by: devel@… 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 dmethvin

Resolution: notabug
Status: newclosed

Please ask for help on a forum.

comment:2 Changed 7 years ago by devel@…

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 dmethvin

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.

Note: See TracTickets for help on using tickets.