Are you sure about the multiple reload requests? I just checked it out
(via the w3schools) and it isn't happening with Firefox 1.5.
JavaScript:
var imgnum = 0;
var imgs = ['paper.jpg','bgdesert.jpg'];
function srcCh(e)
{
e.src = imgs[imgnum];
imgnum = imgnum ? 0 : 1;
}
HTML:
<input type="image" src="paper.jpg" onmouseover="srcCh(this)">
Karl Rudd
On 2/16/07, Brice Burgess <[EMAIL PROTECTED]> wrote:
> 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
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
