The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

NAV.BAR picture delay.

View previous topic View next topic Go down

Solved NAV.BAR picture delay.

Post by Pasan on June 28th 2010, 1:31 am

I've had my research, but I havn't found anything about picture delays.

Here is the script (CSS) that I've used:

Code:
#i_icon_mini_index {
background-image: url(http://www.mypicx.com/uploadimg/1069874141_06272010_1.png);
width: 86px;
height: 26px;
}
#i_icon_mini_index:hover {
background-image: url(http://www.mypicx.com/uploadimg/1922547808_06272010_1.png);
width: 86px;
height: 26px;
}
My problem is simple; Once I "hover" my mouse over the picture I first see the background before I actually see the hover picture (Pretty annying).
Once the picture is loaded into the site, the delay stops.

So here is my question: How do I load a picture into the site to eliminate the delay?

Pasan
New Member

Posts : 5
Reputation : 0
Language : Norwegian, Danish and English.

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by Pasan on June 29th 2010, 5:28 pm

dumb

Sure noone know anything about this?

Pasan
New Member

Posts : 5
Reputation : 0
Language : Norwegian, Danish and English.

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by Pasan on July 2nd 2010, 2:31 am

dumb again, still noone who can help me?

Pasan
New Member

Posts : 5
Reputation : 0
Language : Norwegian, Danish and English.

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by ankillien on July 2nd 2010, 3:43 am

Hello,

The delay is possibly caused by your image hosting site.
Please try uploading the image to another image host, like Tinypic.com

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by Pasan on July 3rd 2010, 4:04 am

Well, it's a possibility. I'll check it out.

------

Edit: I tested the script with tinypic, but it seems like it didn't help.

I've observed my forum on different occasions, and some points at the day the pictures don't have delay at all.

Are the forumotion servers on such a heavy load that they aren't able to provide "customers" the neccesary Bandwidth?

------

So you can't insert a code to have the picture loaded to the side beforehand?

I guess another propotial would be to include both icons in a single image file. I've seen alot of png files with both images in one, but I've never figured them out.

Could anyone come with a example of a code that enables that?

Pasan
New Member

Posts : 5
Reputation : 0
Language : Norwegian, Danish and English.

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by ankillien on July 3rd 2010, 9:45 am

Forumotion servers are powerful enough.
May be you are using a slow internet connection. I also have a slow connection and I face lagging problem while loading images.

Do all your members face this problem? or its only you?

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by RoNo on July 3rd 2010, 12:48 pm

I've experienced the intermittent delay as well
(even with a super fast cable connection)

Using Css to preload images fixed my delay issues.
Most notably when using 2 hover images for links.

(example) animated gif and baseball cursor
Scroll down & hover MLB Scores here or here to test

Maybe the preload method will help you also.

Try adding this code to your Css Stylesheet
Code:
div#preload {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
Place your hover image(s) in a preload div
and add it to your Homepage message or a widget
Code:
<div id="preload">
<img src="http://www.mypicx.com/uploadimg/1922547808_06272010_1.png" alt="" height="1" width="1">
</div>




I use a preload div (containing several images) in a widget.
(anywhere/any widget will do since the images are hidden)
Code:
<div id="preload">
<img src="Preload Image #1.gif" alt="" height="1" width="1">
<img src="Preload Image #2.cur" alt="" height="1" width="1">
<img src="Preload Image #3.gif" alt="" height="1" width="1">
<img src="Preload Image #4.gif" alt="" height="1" width="1">
<img src="Preload Image #5.cur" alt="" height="1" width="1">
</div>
Edit the Url's & amount of images you need.
Images on my games page used to load slow until I did this.

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by Pasan on July 3rd 2010, 5:25 pm

thanks for the codes RoNo I'm glad you had the time to help me with this minor issue (Yes, I'm kinda perfectionist and I want everything to work properly and smooth). I thanks you at the strongest. ^^

As I mentioned earlier, I've been searching the web alot for solutions, and it seems like this worked brilliantly!

Pasan
New Member

Posts : 5
Reputation : 0
Language : Norwegian, Danish and English.

Back to top Go down

Solved Re: NAV.BAR picture delay.

Post by ankillien on July 3rd 2010, 6:25 pm

Solved > Locked

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum