StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Thank you for the advice jAndy and Billy Moon. Those are some great practices that I've unwittingly failed to comply with when churning out the codes.</p> <p>The page transitions are now fine across all browsers because the sluggishness can only be observed under intense scrutiny; to the naked eye, it is more or less acceptable.</p> <p>I think I need to apologise first and foremost to everyone because I left out a very important snippet of codes which I realised is causing the bulk of the problem. The big issue here is when I have 2 graphics with ids - #md4 and #md5 - sliding in from the left and fading in, it starts to get really jerky. The animation only happens once: upon entry to the homepage. The jquery for the animation:</p> <pre><code>$(document).ready(function(){ $('#md4').fadeTo(2000, 1); $('#md5').animate({left: "50px" }, 1800); $('.home').fadeTo(2000, 0.8); $('#bg-img-4').fadeTo(900, 1); $('#menu').fadeTo(2000, 1); $('#copyright').fadeTo(2000, 1);}); </code></pre> <p>Take note also that the two graphics mentioned with ids #md4 and #md5 have been styled to fit, crop and stretch proportionately to the browser size. Here are the codes that I've provided before but want to embed again just so we don't get confused:</p> <pre><code>#md4, #md5{ min-height: 100%; min-width: 1024px; width: 92%; height: auto; position: fixed; top:0; left:0; z-index:-3; opacity:0.3;} </code></pre> <p>As previously mentioned, I've tried to tackle the issue by creating an index.html page to load all the images into the cache before coming to the home page and loading all the jquery animations. In theory, it should take a fair bit off the load for processing, but the performance is still very much sub par in Macs with screens above 18", regardless of the browsers, but with FF version 4 being the best. The issue is also occurring on Mac screens below 18", but isolated only to FF version 4 and below.</p> <p>I have toyed with the idea of sequencing the animation to happen consecutively rather than concurrently, but I have hesitated in part because I was afraid I would compromise too much on the intended effect of everything happening at once for just a wee bit of performance booster. Some advice on that will be very much appreciated too.</p> <p>So the big question here is: Bearing in mind all the stated parameters (graphics and divs fading in all at the same time on page load), what can I do optimize the animation across all the latest major browsers and screen sizes such that there will be minimal sluggishness.</p> <p>Thank you very much in advance guys. Appreciate all the help rendered so far from the bottom of my heart.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload