PDA

View Full Version : preload background image


andy1212
09-29-2010, 03:14 AM
I have been searching google for a few hours now trying to find a way to preload the background image of my website and I can't find a tutorial to do this. I'd like to have a preloader that spins in a circle until the background image is loaded using a way other than flash. I'm using HTML to display the background image and using dreamweaver cs4 to construct my website. If anyone knows a method of doing this or a good tutorial I can look at I would appreciate that alot. Thanks for your time.

edbr
09-29-2010, 03:25 AM
http://www.netmechanic.com/news/vol6/css_no18.htm you could try this. not tested

DWcourse
09-29-2010, 04:50 AM
Why is your background image so large that you need to make everyone wait?

edbr
09-29-2010, 05:04 AM
which is why that is untested

Corrosive
09-29-2010, 06:04 AM
Why is your background image so large that you need to make everyone wait?

Ha, ha. Exactly the thought that crossed my mind when I saw the thread title. Something is wrong if your background doesn't load straight away. Tell us the size (in mb) of your image.

andy1212
09-29-2010, 04:19 PM
the image is 1.57 mbs, and on my comp it only takes like 2 or 3 seconds to load but i just want to put a preloader for it encase someone viewing the website has a slow internet service and so they don't leave the webpage. I didn't think it would be to much to ask for lol, i could do it in flash but i wanted to try creating a preloader in javascript or something because the background is embedded in the html doc of the page. It's an all black background and then an image in the center that is 1600px by 1058px. Does anyone know of a good tutorial I can look off of or have a step by step method of creating a preloader? thanks for your time and the replies so far.

I'm looking at the tutorial from the second post right now and I'll post here if I have any problems or how it turned out. Thanks again

Corrosive
09-29-2010, 04:22 PM
the image is 1.57 mbs

That is far too big! Honestly (and I'm sure you came to this site for pro advice) you don't need a preloader you need to optimise that image. I have whole websites that are smaller than that!

andy1212
09-29-2010, 04:54 PM
I guess I'll have to change the background then, I just have seen websites with images that take up the whole background and some have loaders, some have images that change to different huge images and their websites load up and run fine for instance trump.com, august.com.au, twelve-restaurant.co.uk, jansport.com, their background is a video, there's samsung.com and so much more. Does anyone know how these websites are able to have huge images as their background and how I might be able to make background a whole image without jeopardizing loading times and people leaving my webpage. That's pretty much all I want to know...

Corrosive
09-29-2010, 05:10 PM
That's pretty much all I want to know...

Which bit of 'you need to optimize the image' aren't you getting? You don't have to change the image at all. Just strip out the meta tags and other superfluous information and take it back to a file size suitable for web.

I've given you the answer!

andy1212
09-29-2010, 05:20 PM
ok thanks i'll see if that works better but theres no possible way to make a preloader?

andy1212
09-29-2010, 05:22 PM
i read the tutorial from the second post and it's not what i'm looking for, i'm looking to have a preloader that shows progress if someone has a slow internet service, lik e0 - 100% or a circle spinning around or a bar with stripes through it, just something like that.

Corrosive
09-29-2010, 05:47 PM
How about something like this then; http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/ If that isn't what you want then Google 'preloader for web page jquery' there are loads of variations.

You are not tackling the root of the problem in my opinion, you are papering over the cracks. 1.4 mb is far too big for a background image, slow connection or not!

Read this, I think it explains everything you need to know to just have your pages appear quickly and efficiently; http://www.yourhtmlsource.com/optimisation/imageoptimisation.html

Web design is as much about clean, well thought out code and with the bare minimum file sizes as it is about pretty pictures! People just won't wait for preloaders nowadays and Google says that page download speed is a thing they look for when ranking pages; http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html and provide tools to help you do this; http://code.google.com/speed/page-speed/

It really does matter and I'm trying not to be a d*ck about it...but probably failing!

gentleone
09-29-2010, 05:52 PM
I'm trying not to be a d*ck about it...but probably failing!

Noooo.... how did that even crossed your mind :mrgreen:

Corrosive
09-29-2010, 05:54 PM
Noooo.... how did that even crossed your mind :mrgreen:

Thanks for the sarcastic vote of confidence there dude!

Try running your image through this; http://tools.dynamicdrive.com/imageoptimizer/ and see what it does.

gentleone
09-29-2010, 06:01 PM
Thanks for the sarcastic vote of confidence there dude!
Was joking a bit, sorry ;)

andy1212
09-29-2010, 06:13 PM
haha no ur not i understand what you mean, a big backgound image causes slow loading times and leads viewers to leave the page because of the wait. I was just trying to make a nice background for my website like some of those websites have for theirs that I listed above. I'll look at the links you posted and try to minimize the size of my image as much as possible but your right it's better to have a small image like a gradient repeating horizontally or vertically so the background loads fast. I more or less just want to play around with the image as my background and learn how to add in a preloader with the loading bar, and maybe if I figure out the preloader code, I can work it into a photo gallery if I wanted to construct one. I've only designed websites on flash for a few people but I'm starting to learn more about html, css, javascript and so on and I decided to design my website using them. I'm not a pro at web design so that's why I came on here for advice. So I'll look into what you've told me to do and thanks for the help and your time.