Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 02-29-2012, 01:34 PM
Member
Latest Blog:
None

 
Join Date: 07-03-11
Posts: 37
iTrader: 0 / 0%
Preloading graphics- can it really be done?

I've dabbled with this problem off and on for a couple of years now- I hate the fact that my Roller graphics "flicker" the first time they're loaded onto a page. I've tried all kinds of so-called solutions for pre-loading the rollover states, but absolutely nothing has ever actually worked. Most suggestions seem to revolve around loading the graphics with display:none, or loading them offscreen, but none of these things have ever worked for me. The only thing that's ever really worked for me is putting the rollover state into the same graphic as the normal state, then sliding the entire graphic up and down within a Div. While that's at least a workable solution, it's a ton of work. Surely there must be some way to just tell a graphic to load itself into memory.

Does anyone here know of a method of preloading that actually works?
Thanks in advance!
 
Reply With Quote
  #2 (permalink)  
Old 02-29-2012, 03:18 PM
The Controversial Coder
Latest Blog:
None

 
Join Date: 05-01-06
Location: Manchester; UK
Posts: 2,527
iTrader: 0 / 0%
If you mean what I think you mean then not really, as it has to be loaded for the first time each time, unless your images aren't optimised it shouldn't be very noticeable.

Every time a user clears his cache, or get's a newer cached version of your website everything is loaded again.
 
Reply With Quote
  #3 (permalink)  
Old 02-29-2012, 06:31 PM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 2,665
iTrader: 1 / 100%
You can use javascript for that:
Code:
<script type="text/javascript"> image1 = new Image(); image1.src = "/images/imagefile1.jpg"; image2 = new Image(); image2.src = "/images/imagefile2.jpg"; // etc... </script>
Will load the images in to the web browsers cache so they display rigth away.
Ofcause you should make sure the javascript is located in the beginning of the document. Forexample just after <body>
__________________
Need a break? EnterCave more than 40000 online games in 15 categories.
Search or browse through EnterCave Online Games Directory
 
Reply With Quote
  #4 (permalink)  
Old 02-29-2012, 06:52 PM
CerealNut's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 02-26-12
Location: Charlotte, NC
Posts: 158
iTrader: 0 / 0%
The only way I know of to stop the flicker is by using a sprite technique. You just put a hover selector on the object and update the background-position attribute to bump down to the second image within the sprite.

Most people use GIF's, but that will also work with JPG's and PNG's.

Search for CSS rollover in google.

This is an example of the css code I use for an image rollover:
Code:
.image1{ background: transparent url(/images/image1.gif) repeat scroll 0 0px ; height: 564px; width: 553px; } .image1:hover{ background: transparent url(/images/image1.gif) repeat scroll 0 564px ; }
__________________
Sudoku - PlanetSudoku.com
Millions of Sudoku puzzles including Sudoku 9x9, 4x4, 6x6, 8x8, 12x12, 16x16, 20x20, 25x25, Multi 2, Multi 4, and Samurai
Kids to Expert Level with How to Sudoku section.
 
Reply With Quote
  #5 (permalink)  
Old 02-29-2012, 10:23 PM
Member
Latest Blog:
None

 
Join Date: 07-03-11
Posts: 37
iTrader: 0 / 0%
Quote:
Originally Posted by J. H. Rasmussen View Post
You can use javascript for that:
Code:
<script type="text/javascript"> image1 = new Image(); image1.src = "/images/imagefile1.jpg"; image2 = new Image(); image2.src = "/images/imagefile2.jpg"; // etc... </script>
Will load the images in to the web browsers cache so they display rigth away.
Ofcause you should make sure the javascript is located in the beginning of the document. Forexample just after <body>
That actually worked! Thanks man!
 
Reply With Quote
  #6 (permalink)  
Old 03-01-2012, 02:14 AM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 2,665
iTrader: 1 / 100%
You're welcome :-)
__________________
Need a break? EnterCave more than 40000 online games in 15 categories.
Search or browse through EnterCave Online Games Directory
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
*HOT* Myspace Comment Graphics Script!( 7,500 Graphics) *** 100% AUTOMATED *** turbotraffic Content 0 10-13-2009 01:40 AM
*HOT* Myspace Comment Graphics Script!( 7,500 Graphics) *** 100% AUTOMATED *** turbotraffic Content 0 09-13-2009 06:48 PM
i need some help with graphics normandusk Web Design Lobby 3 05-26-2006 04:29 PM
2 new graphics Coffeee™ Graphic Design Forum 37 10-23-2003 06:45 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 06:13 AM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.