Preload hover images using negative position

@ http://tinyurl.com/6gdfnl9 I have added a hover image for resources. trying to cache the hover image by attaching it to another html element to get it to preload
ul#nav li.resourcesli {
	background-image:url("/images/topnav/resources-hover.png") no-repeat -9999px -9999px;
}
}

Open in new window

This does not seem to work. Why is this?
rhandalthorAsked:
Who is Participating?
 
Gurvinder Pal SinghCommented:
did you checked the debugger, if the image is reaching the browser or not?
0
 
Gurvinder Pal SinghCommented:
i am not able to access your page.
How exactly are you preloading the image?
0
 
rhandalthorAuthor Commented:
Page is accessible via link. Did try. I preload the hover image using
background-image:url('/images/topnav/resources-hover.png') no-repeat -9999px -9999px;

Open in new window

and I show it on hover using:
#menu a.resourcesmenu:hover {
	background-image:url('/images/topnav/resources-hover.png');
}

Open in new window

0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Gurvinder Pal SinghCommented:
This is not a preload, since the image resource will only be accessed after that HTML element is loaded on the browser.

Check this link below on how to preload the image
http://www.pageresource.com/jscript/jpreload.htm
0
 
rhandalthorAuthor Commented:
The "hidden" image is attached to the li and is loaded before the hover image is loaded on hover on the anchor tag. As they are identical the loading should be instantaneous. Similar hover preloading was done here: http://www.beeldentekst.com/
0
 
Gurvinder Pal SinghCommented:
how did you attached to the li?
is the li element loaded on the screen or loaded in DOM already?
0
 
rhandalthorAuthor Commented:
All the menu list items are part of the html file and are in the header. A hover images is once loaded as a CSS background image to a li and hidden and once again when I move my mouse pointer over the <a></a> inside the <li></li>  here the html:
<div id="menu">
	<ul id="nav">
		
				<li class="active aboutli"><a href="/about" title="" class="aboutmenu" accesskey="1" ></a></li>
		<li class="active peopleli"><a href="/people" title="" class="peoplemenu" accesskey="1"></a></li>
	  <li class="projectsli"><a href="/projects" accesskey="2" title="" class="projmenu"></a></li>
  <li class="resourcesli"><a href="/resources" accesskey="3" class="resourcesmenu" title="" ></a></li>
		<li class="contactli"><a href="/contact-mission-blue-design" class="contactmenu" accesskey="4" title="" ></a></li>
		<li class="blogli"><a href="http://www.missionbluedesign.com/blog/" accesskey="4" class="blogmenu" title=""></a></li>
	</ul>
</div>

Open in new window

0
 
Gurvinder Pal SinghCommented:
as per your css
#menu a.resourcesmenu:hover

you should be having an anchor 'a' element inside the 'menu' element, but from your HTML I can't see any anchor element inside the 'menu' element
0
 
rhandalthorAuthor Commented:
There is, it just is in #menu li.resourceli a.resourcemenu:hover. In Firebug I do see it being loaded. But we need to focus on the preloader on line 344 before the anchor
ul#nav li.resourcesli

Open in new window

Three of the menu items that load hover images outside of the screen do show with code in FB 1.9.0a3 under FF 7.0.1 for Mac SL, but the final three load with empty curly braces.. And all seems to load just fine in Chrome 5.0.874.54 beta . When I loaded the page in IE8 the hover image did not seem to get preloaded though. Will check the earlier indicated site as it works there and we seem to be stuck here..
0
 
rhandalthorAuthor Commented:
Using

#menu ul#nav li.resourcesli a.resourcesmenu:hover {
	background-image:url('/images/topnav/resources-hover.png');
}

Open in new window

and

#menu ul#nav li.resourcesli {
	background-image:url('/images/topnav/resources-hover.png') no-repeat -9999px -9999px;
}

Open in new window


is more precise, but did not change the loading. Still trying a few things,,
0
 
rhandalthorAuthor Commented:
Added JS PReloader and IE8 loves it. FF and Chrome seem to ignore it..
0
 
rhandalthorAuthor Commented:
Preloader:

<script type="text/javascript">
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
 		$('<img />').attr('src',this).appendTo('body').css('display','none');        
		// Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'images/topnav/about-hover.png',
	'images/topnav/people-hover.png',
    'images/topnav/projects-hover.png',
    'images/topnav/resources-hover.png'
	'images/topnav/contact-hover.png',
	'images/topnav/blog-hover.png'
]);
</script>

Open in new window

0
 
Gurvinder Pal SinghCommented:
what is the response (by chrome and FF) if you use the alternative you have mentioned in above code (line 5-6)?
0
 
rhandalthorAuthor Commented:
I tried and it briefly seemed to work in FF, not in Chrome and then I did one more load after emptying cache and FF and Chrome showed a brief white spot again before the hover image was loaded. Try it for yourself at initial given link..
0
 
Gurvinder Pal SinghCommented:
try with this

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
             $('<img src="' + this + '" />');        
    });
}
0
 
rhandalthorAuthor Commented:
Changed, but no change it seems. Not in FF and Chrome anyways. Very odd!
0
 
rhandalthorAuthor Commented:
I did get [14:36:04.986] $ is not defined @ http://domain.com/:14 which refers to $(arrayOfImages).each(function(){
 in
<script type="text/javascript">
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
 		//$('<img />').attr('src',this).appendTo('body').css('display','none');        
		// Alternatively you could use:
        //(new Image()).src = this;
		$('<img src="' + this + '" />');   
    });
}

// Usage:

preload([
    'images/topnav/about-hover.png',
	'images/topnav/people-hover.png',
    'images/topnav/projects-hover.png',
    'images/topnav/resources-hover.png',
	'images/topnav/contact-hover.png',
	'images/topnav/blog-hover.png'
]);
</script>

Open in new window

0
 
rhandalthorAuthor Commented:
Fixed it. Forgot to load jQuery and had one more missing colon. All seems to work now..
0
 
Gurvinder Pal SinghCommented:
Ohh...ok
add that preload method inside

(function($) {
  ... // add that code here
})(jQuery);


it will make sure that the code is executed only after the jquery library is loaded
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.