?
Solved

Preload hover images using negative position

Posted on 2011-10-03
19
Medium Priority
?
416 Views
Last Modified: 2012-05-12
@ 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?
0
Comment
Question by:rhandalthor
  • 11
  • 8
19 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908138
i am not able to access your page.
How exactly are you preloading the image?
0
 

Author Comment

by:rhandalthor
ID: 36908154
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908187
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:rhandalthor
ID: 36908237
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908300
how did you attached to the li?
is the li element loaded on the screen or loaded in DOM already?
0
 

Author Comment

by:rhandalthor
ID: 36908352
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908478
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
 

Author Comment

by:rhandalthor
ID: 36908551
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
 

Author Comment

by:rhandalthor
ID: 36908576
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
 

Author Comment

by:rhandalthor
ID: 36908724
Added JS PReloader and IE8 loves it. FF and Chrome seem to ignore it..
0
 

Author Comment

by:rhandalthor
ID: 36908732
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908795
what is the response (by chrome and FF) if you use the alternative you have mentioned in above code (line 5-6)?
0
 

Author Comment

by:rhandalthor
ID: 36908821
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
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 2000 total points
ID: 36908837
try with this

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
             $('<img src="' + this + '" />');        
    });
}
0
 

Author Comment

by:rhandalthor
ID: 36908865
Changed, but no change it seems. Not in FF and Chrome anyways. Very odd!
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36908886
did you checked the debugger, if the image is reaching the browser or not?
0
 

Author Comment

by:rhandalthor
ID: 36908928
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
 

Author Comment

by:rhandalthor
ID: 36908942
Fixed it. Forgot to load jQuery and had one more missing colon. All seems to work now..
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908948
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question