Making firefox refresh images faster

Question

I have a thing I'm doing where I need a webpage to stream a series of images from the local client computer. I have a very simple run here: http://jsbin.com/idowi/34

The code is extremely simple

setTimeout ( "refreshImage()", 100 );

function refreshImage(){
  var date = new Date()
  var ticks = date.getTime()
  $('#image').attr('src','http://127.0.0.1:2723/signature?'+ticks.toString());
  setTimeout ("refreshImage()", 100 );
}

Basically I have a signature pad being used on the client machine. We want for the signature to show up in the web page and for them to see themselves signing it within the web page(the pad does not have an LCD to show it to them right there). So I setup a simple local HTTP server which grabs an image of what the current state of the signature pad looks like and it gets sent to the browser.

This has no problems in any browser(tested in IE7, 8, and Chrome) but Firefox where it is extremely laggy and jumpy and doesn't keep with the 10 FPS rate. Does anyone have any ideas on how to fix this? I've tried creating very simple double buffering in javascript but that just made things worse.

Also for a bit more information it seems that Firefox is executing the javascript at the correct framerate as on the server the requests are coming in at a constant speed. But the images are only refreshed inconsistently ranging from 5 times per second all the way down to 0 times per second(taking 2 seconds to do a refresh)

Also I have tried using different image formats all with the same results. The formats I've tried include bitmaps, PNGs, and GIFs (GIFs caused a minor problem in Chrome with flicker though)

Could it be possible that Firefox is somehow caching my images causing a slight lag? I send these headers though:

Pragma-directive: no-cache
Cache-directive: no-cache
Cache-control: no-cache
Pragma: no-cache
Expires: 0

Sure, don't make it refresh an image every 1/10 of a second... That's outrageous! If you need something to run at 10 FPS, USE FLASH! — animuson
@anim there isn't much of an option. it's this or limit ourselves to IE and ActiveX controls. My question is why can every browser handle it but FF. And also without buying expensive Flash licenses(and learning how to use it for this) — Earlz
setTimeout(refreshImage, 100); - don't pass strings to setTimeout() please. — Nick Craver
What do you mean there's not an option? What could it possibly be that you need something to refresh every 1/10 of a second? P.S. It works completely fine for me in FireFox, there's no lag, just a ton and ton of 'images' showing up in my item list. — animuson
I have a wild idea that will probably not work, but I'm suggesting it so some guru out there can start hacking something together. Take the image that is being generated and convert it to vectors and draw it on the browser using HTML5's <canvas> tag. — Geek Num 88

womp womp · Accepted Answer · 2010-05-25T21:00:50

The lag may be caused by the way Firefox handles DNS queries and support for IPv6.

Try turning off IPv6 lookups and see if that solves the lag.

Making firefox refresh images faster

3 Answers