Detecting whether images are enabled 1

[BillyRayPreachersSon]

I'm trying to come up with a way to detect if images are enabled in a user's browser.

This is what I've come up with so far:

var detectImagesTimer = null;
var detectImagesImage = null;

function detectImages() {
	detectImagesImage = new Image();
	detectImagesImage.onload = detectImagesPass;
	detectImagesImage.onerror = detectImagesFail;
	detectImagesTimer = setTimeout('detectImagesFail();', 500);
	detectImagesImage.src = '[URL unfurl="true"]http://www.google.co.uk/intl/en_uk/images/logo.gif';[/URL]
}
function detectImagesFail() {
	detectImagesTimer = null;
	alert('Images are not enabled');
}
function detectImagesPass() {
	if (detectImagesTimer) clearTimeout(detectImagesTimer);
	alert('Images are enabled');
}

detectImages();

However, I'd like to be able to remove the reliance on a timer, and also remove the reliance on a remote image.

Can anyone shed any light on how I might achieve either of these goals?

Thanks!
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[adam0101]

To remove the timer, you could use the onload event of the page instead of the image, then check the readyState property of the image.

-- Tested in IE6 --

<img id="imgDetect" src="[URL unfurl="true"]http://www.google.co.uk/intl/en_uk/images/logo.gif"[/URL] style="visibility:hidden;position:absolute">
<script>
function detectImages(){
  return document.getElementById("imgDetect").readyState=='complete';
}

window.onload=function(){
  alert(detectImages())
}
</script>

It's not bundled into a single neat little function, but it works.

I don't know if Mozilla browsers have a readyState property (probably not) but maybe you could check if the size of the image changed (which does not work in IE, so you'd have to include some kind of browser detection).

-- NOT TESTED! --

<img id="imgDetect" src="[URL unfurl="true"]http://www.google.co.uk/intl/en_uk/images/logo.gif"[/URL] style="visibility:hidden;position:absolute">
<script>
function detectImages(){
  if(document.readyState){
    return document.getElementById("imgDetect").readyState=='complete';
  } else {
    return document.getElementById("imgDetect").width > 0;
  }
}

window.onload=function(){
  alert(detectImages())
}
</script>

As for the remote image, if Internet Explorer still supported XBM images, you wouldn't need an actual image file. You would just do this:
detectImagesImage.src = 'javascript:myXbmString';

Unfortunately, that does not work for me on IE6.

I hear Internet Explorer 7 may support base64 encoded images. So you may be able to do this:
detectImagesImage.src = 'data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==';

But you may have to live with a dummy gif on your server.

Adam

http://adameslinger.blogspot.com/

 

[BillyRayPreachersSon]

Thanks for that, Adam. At least in IE 5.0, 5.5, and 6.0 (pre SP2) I have a guaranteed test now (with a 1x1 XBM).

I'm integrating the Fx/Moz/Safari code now - which needs to be tested first - but should be fine.

I'll post results back when I'm done!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Grrr.. how annoying. Fx displays images created using:

<img src="data:image/gif;base64,..." />

even when "Load images" is unchecked.

:-(

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]