{"authorId":1,"title":{"title":{}},"slug":"how-to-preload-images-when-you-cant-use-css-sprites","postDate":1226486517,"expiryDate":null,"enabled":1,"fields":{"2":"<p>I have already shown <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/the-6-most-important-css-techniques-you-need-to-know\/#cssSprites\">how to use css sprites<\/a>, but there are times when you just cannot use them. Sometimes you still want the benefit of preloading the image, so you have to get creative.<\/p>\n<!--more-->\n<h2>An Example<\/h2>\n<div class=\"leftSide pullLeft col1\">\n<a href=\"http:\/\/trevordavis.net\/play\/css-sprites\/\"><img src=\"http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-vert.gif\" alt=\"CSS Sprite\" class=\"imageRight frame\" height=\"40\" width=\"21\" \/><\/a>\n<\/div>\n<p>I have created a <a href=\"http:\/\/trevordavis.net\/play\/css-sprites\/\">demo of a CSS sprite in action<\/a>. The sprite has the two images sitting on top of each other, and each link is using the image as a background image and then shifting the position of it when hovering.<\/p>\n\n<div class=\"codeblock\"><code>\na.spriteVert&nbsp;&#123;&nbsp;<br \/>&nbsp;background:&nbsp;url(http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-vert.gif)&nbsp;no-repeat&nbsp;top&nbsp;left;<br \/>&nbsp;padding-left:&nbsp;30px;<br \/>&#125;<br \/>a.spriteVert:hover&nbsp;&#123;&nbsp;background-position:&nbsp;bottom&nbsp;left;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>It works great in the first example, but <strong>what happens if the user resizes their text?<\/strong> The sprite starts to break. When I am building a site, I am always thinking with the <a href=\"http:\/\/simplebits.com\/publications\/bulletproof\/\">bulletproof mentality of Dan Cederholm<\/a>, so this is just not an acceptable solution.<\/p>\n\n<p>Now, we obviously couldn&rsquo;t position the images next to each other because we would still have a problem when shifting the image around.<\/p>\n\n<h2>The Solution<\/h2>\n<p>Typically when you are using CSS sprites, there is another element containing the anchor. Whether it&rsquo;s a list item, paragraph, div, etc; <strong>this solution will work unless you have a background image on that element as well<\/strong>.<\/p>\n\n<h3>Example<\/h3>\n<div class=\"leftSide pullLeft col1\"><a href=\"http:\/\/trevordavis.net\/play\/css-sprites\/preload-image\/\"><img src=\"http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-hover.gif\" alt=\"Background image for hover state\" class=\"leftSide frame\" height=\"20\" width=\"21\" \/><\/a><a href=\"http:\/\/trevordavis.net\/play\/css-sprites\/preload-image\/\"><img src=\"http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-off.gif\" alt=\"Background image for unactive state\" class=\"leftSide frame\" height=\"20\" width=\"21\" \/><\/a><\/div>\n<p>I have created a second <a href=\"http:\/\/trevordavis.net\/play\/css-sprites\/preload-image\/\">demo that &ldquo;fixes&rdquo; the first example<\/a>. The idea behind it is that instead of combining the images into 1 image, you split it into 2. Then you <strong>place the image that is being shown on hover as the background image on another element<\/strong> (preferably a containing element), just positioned off the screen.<\/p>\n<p>Then when you hover, you switch the background image, which has already been preloaded, so you don&rsquo;t get that &ldquo;white flicker&rdquo;. That may be a little hard to understand, so I&rsquo;ll give an example.<\/p>\n\n<h4>The Markup<\/h4>\n<div class=\"codeblock\"><code>\n&lt;p&nbsp;class=\"spriteContainer\"&gt;&lt;a&nbsp;href=\"#\"&nbsp;class=\"spriteVert\"&gt;Hover&nbsp;Over&nbsp;Me&lt;\/a&gt;&lt;\/p&gt;<br \/>&lt;p&nbsp;class=\"spriteContainer\"&gt;&lt;a&nbsp;href=\"#\"&nbsp;class=\"spriteVert&nbsp;spriteVert2\"&gt;Hover&nbsp;Over&nbsp;Me&lt;\/a&gt;&lt;\/p&gt;<br \/>&lt;p&nbsp;class=\"spriteContainer\"&gt;&lt;a&nbsp;href=\"#\"&nbsp;class=\"spriteVert&nbsp;spriteVert3\"&gt;Hover&nbsp;Over&nbsp;Me&lt;\/a&gt;&lt;\/p&gt;&nbsp;\n\n<\/code><\/div>\n<p><em>Note: The extra classes of spriteVert2 and spriteVert3 are just used to change the font size.<\/em><\/p>\n\n<h4>The CSS<\/h4>\n<div class=\"codeblock\"><code>\np.spriteContainer&nbsp;&#123;&nbsp;<br \/>&nbsp;background:&nbsp;url(http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-hover.gif)&nbsp;no-repeat&nbsp;-9999px&nbsp;-9999px;<br \/>&#125;<br \/>a.spriteVert&nbsp;&#123;<br \/>&nbsp;background:&nbsp;url(http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-off.gif)&nbsp;no-repeat&nbsp;top&nbsp;left;<br \/>&nbsp;padding-left:&nbsp;30px;<br \/>&#125;<br \/>a.spriteVert:hover&nbsp;&#123;&nbsp;<br \/>&nbsp;background-image:&nbsp;url(http:\/\/trevordavis.net\/images\/content\/2008\/11\/sprite-hover.gif);<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<h4>More Explanation<\/h4>\n<p>So looking at the previous example, I am adding the background image that I want to appear on hover as the <strong>background image on the paragraph with a class of spriteContainer<\/strong>, and I am positioning it way off the screen.<\/p>\n<p>Then when I hover over an anchor with a class of spriteVert, <strong>I change the background image to be the one from the paragraph<\/strong> with a class of spriteContainer.<\/p>\n\n<h2>Conclusion<\/h2>\n<p>While this is not as ideal as using CSS sprites because you increase the number of hits to your server, it can help to eliminate the white flicker that you get if the image is not preloaded.<\/p>","4":{"website":{}}}}