[jQuery] CSS: Wasteful requests when switching input image
Regarding; <input type="image" src="a.gif" />
Using Firebug's (FF 2) net monitoring, I noticed that every time I
switched the src of an input image it would request the new src image
from HTTP. FF simply does not cache these images. This is kind of
annoying because it can waste a lot of bandwith or slow the user
experience down -- especially when involving a lot of hovers, or
frequent hover overs such as the close button of a modal window.
I noticed this while looking @ the close button of jqModal. You can see
a demonstration @ the jqModal page, or better yet, see;
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_form_bg
The w3schools uses a background change on a text input, while jqModal
changes the src of an image input. The reasons for the input is that it
takes the focus() event, and allows you to "tab into it". Regardless of
the method.. I was able to rack up 103kb by moving my mouse back &
fourth for 10 seconds in the w3schools example. Not major.. but NOT
OPTIMAL! :)
So.. here is my way around this -- which I'll work into jqModal examples
once I get some feedback on it. Vs. changing the source, I inline both
versions of the input (the "over" & the "out"), alternating their
display value.
<div>
<input type="image" src="close.gif" class="jqmOut" />
<input type="image" src="close_hover.gif" class="jqmOver hidden" />
</div>
---
<script type="text/javascript">
$().ready(function() {
$('input.jqmOut')
.mouseover(function(){
$(this).hide().siblings('input.jqmOver').show(); $})
.focus(function(){ var
f=$(this).hide().siblings('input.jqmOver').show()[0]; f.hideFocus=true;
f.focus(); });
$('input.jqmOver')
.mouseout(function(){
$(this).hide().siblings('input.jqmOut').show(); $})
.blur(function(){ $(this).hide().siblings('input.jqmOut').show(); });
});
</script>
(( the hideFocus() is for aesthetic purposes involving IE ))
Anyhow.. does anyone have any thoughts on this topic? Or can this be
improved upon?
Regards,
~ Brice (another one of those 3am posts... ;) )
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/