Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am redesigning my mobile website which uses a 1x1px Google Analytics for Mobile Websites tracking gif.

The old design displayed the image at the foot of the page, but my new design hides the gif with CSS (display:none).

Will this have any affect on the tracking of the site?

*edit*

Whilst I have moved my tracking gif and solved the immediate issue I am hearing conflicting answers as to whether an image with display:none is, or is not, downloaded.

Can anyone link to any official documentation?

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

Yes. It will still be downloaded and function correctly as a tracking gif, even with display:none. You can test this for yourself by adding an onload attribute to the image:

<img src="image.gif" style="display:none" onload="alert('Image loaded!')" />

This will cause a JavaScript popup to display when the image is downloaded, even though you won't see the image on the page. Live demo here.

If you make the image's src attribute blank, no image is downloaded, so the onload event never fires (live demo):

<img src="" style="display:none" onload="alert('Image loaded!')" />

The reason that the image is still downloaded is that display:none simply "prevents the element from appearing in the formatting structure", in the words of the W3C spec for the display property.

Using display:none does not suppress the HTTP request for the image. This fact is depended upon by some JavaScript developers, who create img tags styled withdisplay:none to pre-cache images before they're ready to be displayed.

Also see the responses to "Does a element with display:none set in css still get downloaded by the browser?" over on Stack Overflow.

As mentioned in feela's answer, though, there's little reason to hide a 1px square tracking gif when you can move it somewhere that won't affect your layout.

share|improve this answer
2  
Whether the image will be loaded depends upon the browser's implementation - while it's not so common on desktop browsers now (not always the case) there remains the possibility that mobile browser software may demonstrate regressive implementations so testing (or finding others' test results) is always in order. –  danlefree Oct 12 '11 at 19:39
    
@danlefree I agree; it's more future-proof not to hide images if it's essential that they're downloaded. –  Nick Oct 13 '11 at 10:09
add comment

Normally, images which are set to display: none; aren't loaded at all – so no tracking takes place. But depends on whether the CSS is loaded before the markup (e.g. in the <head>) or after the markup (which will cause a "loading-flicker"). I don't know about visibility: hidden;

Why are you hiding that tracking-image at all? Just put it somewhere, where nobody will mention it.

share|improve this answer
    
It was affecting layout in its previous position, but I have removed the CSS and moved it now, ta. –  John Catterfeld Oct 11 '11 at 15:07
1  
@feeela Are you sure about this? I believe that images are always downloaded even if display:none is used, and so it would make little difference where the CSS rule is placed. –  Nick Oct 12 '11 at 11:32
1  
Whoops, you are right. That only counts for the mobile Opera, which parses the CSS on a Opera server. Should I delete the answer? –  feeela Oct 12 '11 at 12:06
    
@feeela I think the sentence 'Just put it somewhere where nobody will mention it' is good advice. I'd leave your answer as it is (or edit it to remove any errors.) –  Nick Oct 12 '11 at 12:19
    
If that is correct about mobile Opera then it's worth displaying it for that alone. –  John Catterfeld Oct 12 '11 at 13:01
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.