Comments on: Client-Side Image Replacement http://www.mrspeaker.net/2006/04/19/client-side-image-replacement-2/ Javascript flâneur, internet flibbertygibbert Thu, 26 Jan 2012 09:22:49 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Mr. Speaker http://www.mrspeaker.net/2006/04/19/client-side-image-replacement-2/comment-page-1/#comment-889 Mr. Speaker Thu, 20 Apr 2006 00:19:51 +0000 http://mrspeaker.webeisteddfod.com/2006/04/19/client-side-image-replacement/#comment-889 That pre-loady thing is weird... if you refresh the page once it starts doing that slow plot-one-character-at-a-time thing then it loads instantly. Otherwise it reloads the background image for every single character. I'll fix it on the weekend. Though I'm not sure how you preload when the image is set in css... hmmm... The FOUC is mainly because I do the image replacing in js as it gets to each element. If you put the image replacement in the style sheet then you don't the flash, but if someone has js turned off then the headings will be replaced with nothing. Also, if you replace a tag that has other tags nested - like a p tag, then it looks tres cool but smashes the nested tags. Pfft. who needs hyperlinks. That pre-loady thing is weird… if you refresh the page once it starts doing that slow plot-one-character-at-a-time thing then it loads instantly. Otherwise it reloads the background image for every single character. I’ll fix it on the weekend. Though I’m not sure how you preload when the image is set in css… hmmm…

The FOUC is mainly because I do the image replacing in js as it gets to each element. If you put the image replacement in the style sheet then you don’t the flash, but if someone has js turned off then the headings will be replaced with nothing.

Also, if you replace a tag that has other tags nested – like a p tag, then it looks tres cool but smashes the nested tags. Pfft. who needs hyperlinks.

]]> By: hank http://www.mrspeaker.net/2006/04/19/client-side-image-replacement-2/comment-page-1/#comment-888 hank Wed, 19 Apr 2006 08:15:40 +0000 http://mrspeaker.webeisteddfod.com/2006/04/19/client-side-image-replacement/#comment-888 Hey I like where it's going - and that typeface is fragalicious... A couple of issues I'm going to be an anus about, that have been tackled in a few other similar techniques (like <a href="http://www.mikeindustries.com/sifr/" rel="nofollow">sIFR</a>, et al) after lengthy iteration: It seems to take a while to load. When I checked the demo page, each character replacement caused my browser to download the character map separately. Some preloading wizardry should fix it... You also get the FOUC effect... the Flash Of Unstyled Content in the replaced headings. I think the way around this is first up setting those headings to be visibility:hidden or somesuch Like a lot of CSS image replacement techniques, with images off and JS on, you don't see anything. I think there might be a way to position the text images over the top of the headings, rather than replacing them... but I'm not sure, and most people don't care anyway. Keep the good stuff comin' Hey I like where it’s going – and that typeface is fragalicious…

A couple of issues I’m going to be an anus about, that have been tackled in a few other similar techniques (like sIFR, et al) after lengthy iteration:

It seems to take a while to load. When I checked the demo page, each character replacement caused my browser to download the character map separately. Some preloading wizardry should fix it…
You also get the FOUC effect… the Flash Of Unstyled Content in the replaced headings. I think the way around this is first up setting those headings to be visibility:hidden or somesuch
Like a lot of CSS image replacement techniques, with images off and JS on, you don’t see anything. I think there might be a way to position the text images over the top of the headings, rather than replacing them… but I’m not sure, and most people don’t care anyway.

Keep the good stuff comin’

]]>