Is it possible to check whether a background image has been loaded using jQuery?

Question

I am trying to find out whether it is possible to check if a background image has been loaded before fading in the content? The background image is set in the css so if the user doesnt have js turned on they are still able to view the site.

I have tried $(".quick-load").load(function () { $("#content").fadeIn(); });

I have also used .ready() but none have had any effect.

The exact problem i am having is that the image will flicker on some occasions.

Any ideas would be helpful, thanks.

one question... you are loading the bg through css so that it loads even when js is disabled but then what about the content? you don't care about that? :) — Atul Dravid
– Atul Dravid, Commented Apr 22, 2011 at 11:02
i have a special no js file with html5. so if no js is detected i have display: block on the content — saunders
– saunders, Commented Apr 22, 2011 at 11:08

Tom Gruner · Accepted Answer · 2011-04-22 11:15:07Z

2

I think you should try a slightly different approach, which is to load the image first in a hidden image tag, then on the load event do your cool fading

<img src="background.png" alt="" id="background" 
style="visibility:hidden;position:absolute" />

Then do:

$('#background').load(function() {
   $("#content").fadeIn(); }
});

This will work because the browser caches the image on load and it will be available to use in the background. Just make sure that the source for your invisible image and your background image are identical.

answered Apr 22, 2011 at 11:15

Tom Gruner

9,6351 gold badge22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

saunders Over a year ago

ahh so you fake the browser to load that image but by the time that invisible image is loaded my background image would have loaded and it wont do any flicker?

Tom Gruner Over a year ago

yeah, that is exactly it. If you search for image preloading too, that is another strategy you could use.

saunders Over a year ago

ah wicked. thanks for that and thanks for the other idea. im going to give your tip a go first:)

wonderwhy Over a year ago

What about if you need to strictly use a background (because of its positioning properties; with the image I'd have to code it myself with jquery)? There should be a way to check if a source finished the download.

Oriol Over a year ago

That looks tempting to use but unfortunately this function is inconsistent across browsers when used on images: api.jquery.com/load-event

Community · Accepted Answer · 2017-05-23 09:59:25Z

0

You can "preload" images by using a hidden <img>.

$('<img/>').attr('src', 'http://picture.com/pic.png').load(function() {
    $("#content").css({"background-image":"http://picture.com/pic.png"
                 .fadeIn();
});

How can I check if a background image is loaded?

edited May 23, 2017 at 9:59

CommunityBot

11 silver badge

answered Feb 19, 2012 at 22:49

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Collectives™ on Stack Overflow

Is it possible to check whether a background image has been loaded using jQuery?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related