CODEWITHSUNDEEP
javascriptjqueryperformanceimage
Voriki
Voriki

Reputation: 1647

How to load a large image before anything in the browser is rendered

The website I'm making has a large image fading in from black when the website loads. It's a good quality image and the effect turns out nice.

The problem is that when a person visits the website a first time, the fade doesn't occur and the image just appears. I figure that the opacity is changed right away, but the image itself hasn't been downloaded. Once it's cached, revisiting the site shows the effect.

What are some ways to ensure that the image is fully downloaded before the fade in begins (the fade is simple jQuery: $('#bg').fadeIn(1000);)?

EDIT - Thank you everyone. It's been solved. I left something out that I didn't realize was important. It wasn't an img tag, but a div with an image background. When I changed it to an img, the $(document).ready() function loaded the image before the fade. Thank you!

Upvotes: 1

Views: 338

Answers (4)

merryprankster
merryprankster

Reputation: 3429

$(function() { $('#bg').fadeIn(1000)) })

Upvotes: 3

Tarek
Tarek

Reputation: 3798

i think it's easier to use the ready function

http://api.jquery.com/ready/

Upvotes: 1

Tadeck
Tadeck

Reputation: 137440

Just take a look at .load() event handler in jQuery. It is called when everything in the associated element has been loaded - if you attach it to img tag with your image, the callback will be called when the image was fully loaded.

Upvotes: 2

Royi Namir
Royi Namir

Reputation: 148734

You should put the Script of loading the IMG at the top of the HTML ( HEAD is in option)

BUT

its a bad practice.

you can maeke a basic page and at the button scripts - you can download the img - and by the load event - you can FADE it IN.

Upvotes: 1

Related Questions