Everytime you change the "src" attribute of an image, the browser will
fire a request to the server. That's one of the reasons why img roll-
overs have been replaced with CSS hover a long time ago, this is a
waste of scripting. Something like this is much more effective (and
semantically correct):
(X)HTML:
<ul class="nav">
<li><a href="#about" class="about">About</a></li>
<li><a href="#product" class="product">Product</a></li>
<li><a href="#skill" class="skill">Skill</a></li>
</ul<
CSS:
.nav a {
display:block;
text-indent:-9999px;
overflow: hidden;
width: 100px;
height: 30px;
background-repeat: no-repeat;
}
.about { background-image:url(images/nav/nav_skill.jpg) }
.product { background-image:url(images/nav/nav_skill.jpg) }
.skill { background-image:url(images/nav/nav_skill.jpg) }
.nav a:hover { background-position: 0 -30px }
...
Then all you need is 60px high images with both button states, one on
top of each other. No preloading, no image swapping, all simple :) A
search on google for "css rollovers" or something alike will give you
endless examples.
If you still want to do it with javascript, there's a much shorter
way:
$.each
(['about','product','skill','service','news','member','recruit'],
function(i, val){
$('<img/>').attr('src', 'images/nav/nav_' + val + '.jpg')
.appendTo(?)
.hover(function(){
var $this = $(this);
$this.attr('src', $this.attr('src').replace('.jpg',
'_over.jpg') );
}, function(){
var $this = $(this);
$this.attr('src', $this.attr('src').replace('_over','') );
});
});
You could implement your cacheing with data() there but I think the
performance penalty is likely irrelevant.
cheers,
- ricardo
On Jan 3, 12:26 pm, "David .Wu" <chan1...@gmail.com> wrote:
> Part1
>
> var navPath = 'images/nav/';
> var navArr = new Array
> ('nav_about','nav_product','nav_skill','nav_service','nav_news','nav_member','nav_recruit');
> var navArrLen = navArr.length;
>
> for(i=0;i<navArrLen;i++)
> {
> $(document.createElement('img')).attr('src',navPath +
> navArr[i] +
> '_over.jpg');
> }
>
> Part2
> $('#nav img:gt(0):lt(7)').each(function(i)
> {
> $(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
> $(this).data('btnOut',$(this).attr('src'));
> $(this).hover(function()
> {
> $(this).attr('src',$(this).data('btnOver'));
> },
> function()
> {
> $(this).attr('src',$(this).data('btnOut'));
> });
> });
>
> Part 1 is about to pre load the images
> Part 2 is to give each image a data property; and do the swap image
> function when mouse over and out
>
> my question is, the image pre load succeed, but when I mouse over the
> image, the browser will connect to server to require something, is
> that mean the code do
>
> $(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
> $(this).data('btnOut',$(this).attr('src'));
>
> these tow lines again and again when mouse over?
