I am working on a front page gallery which has several images, scaled to fit the page via CSS.
The images fade from one to the next (overtop of each other), and will resize if the user resizes the browser to use up the space.
The problem is that the image fading performs terribly on most browsers and on all but the newest computers.
However, if the images are not stretched, then the performance is perfect across all browsers on most computers.
I've run into this problem before with other sites I've designed and have spent considerable amount of time researching and testing solutions, but I can't seem to find anything.
Any ideas?
I've implemented a performance/styling trade-off. Instead of arbitrarily scaling the images, say by a factor of 0.7543234, I round it to 8 and so on. I found that arbitrary scaling factors have a huge performance penalty, and using single decimal scaling greatly reduces that.
Here is some js code:
var adjustedNewWidth = Math.round((roundNumber( (newWidth / originalImage.width), 1)+0.1)*originalImage.width);
var adjustedNewHeight = Math.round((roundNumber( (newHeight / originalImage.height), 1)+0.1)*originalImage.height);
- newWidth is the desired width,
- originalImage.width is my array where I keep the original image sizes (since js is so smart it can't access these after it's been scaled),
- roundNumebr is a function which scales to the nearest decimal place
function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
After this the fading works about 50% better but is still not perfect. Well thanks for your help everyone hopefully this helps someone out there.