For example

Weak sauce!

Inline fix

The fix is simple, add an inline style to all of your images.

<img src="..." style="display: block;"... >

This change works on gmail, hotmail, yahoo, mobileme, etc.

Awesome sauce!

For example, the popular ajax loader file that hails from Apple’s own asynchronous progress indicator, has 12 points and loops around once a second. Well, for one thing, 12fps is really choppy, but it already plays slower on Apple’s nifty browser.

jQuery to the rescue

Did you know that jQuery can control css background positions? Are you thinking what I’m thinking?

But first, back to drawing board

So the first part was to break up the animated gif frames and spread them out across a very long canvas. Since Photoshop no longer opens animated gif files (unless you own ImageReady somewhere), Fireworks can open the file. Use Fireworks to export the frames to individual files and THEN Photoshop can import all the files as a stack.

File <Scripts> Load Files into Stack…

For our ajax loader, expand all the layers next to each other and then save it out to its own gif. The file size won’t be that difference in fact.

Now let’s get back to jQuery

In our html, just set the div with a width and height to match your gif to prevent clipping and let the script do the rest.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	setInterval(animate, mpf);
});

Now we have a script that will snap the position of the background over each “frame” at the correct frame rate. Actually, the frame rate is not divisible by 1000, but it’s close and it’s not like you could tell.

The only problem with this script is that it’s constantly running. If you look at the page in Firebug, your going to see the code whipping around with new values all the time. Annoying! Also, chances are your page isn’t going to need some animation playing constantly. Ajax loaders are intermittently called when a simple action is called as a… asynchronous progress indicator! Who knew.

So we’re going to put in a cancel command to this script: clearTimeout.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;
	var runAnimate = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	runAnimate = setInterval(animate, mpf);

	$('.animate').toggle(
		function () {
			clearTimeout(runAnimate);
		},
		function () {
			runAnimate = setInterval(animate, mpf);
		}
	);
});

Add in a toggle so show how to turn on and off the animation and were done.

It even works on ie6!

Normally, a javascript event such as onmousemove would use event.layerX and event.layerY to get the coordinates of our mouse when it moves.

For jQuery, pageX and pageY will return values from the top left of the page and not the layer. Unless the element you’re working with is left-aligned, you need to calculate the offset of that element as well. Not only that (unless there is a better way to do this) the offset values returned doesn’t include the offset values of the parent tag.

In this example, I have two divs.

<div id="frame">
	<div id="content"></div>
</div>

And you can imagine that #frame is centered and has padding. Getting #content’s offset won’t include anything outside of the frame so $(#content).offset().left; would only get you the distance of itself and its parent.

Get your layerX for jQuery

For this example, we are using a known set of divs so we can just write out each div in this script.

$(document).ready(function(){
	$('#canvasForeground').mousemove(function(e){
		var myLayerX = $('#content').offset().left + $('#frame').offset().left;
		var myLayerY = $('#content').offset().top + $('#frame').offset().top;
		var x = 0, y = 0;
		x = e.pageX - myLayerX;
		y = e.pageY - myLayerY;
	});
});

The variables are declared inside the event function to handle window resizing. Now were this a more complicated page and the element in question has deeply nested or even dynamically generated, writing our all the parent tags wouldn’t necessarily work (or be very efficient).* But the approach would remain the same. That’s it!

*standard apology for poor code writing skills