Jquery - load certain image first

Question

I have a question. I use the Cycle plugin on my website for a slideshow. There is a decent amount of images that are being loaded. I also use a technique to scale my background image according to the dimensions of the viewport so the image doesn't get scaled out of proportion.

Now, i want to make sure the background image loads FIRST (so directly at page load) BEFORE any of the other images of the slideshow start to load. Right now, my backgroundimage is gone (has yet to load and is being replaced by the true background-color in the css body tag) until the slideshow has been loaded.

Is there a way to do this?

Thank you very much!

You can create a javascript image object with your background as source and have this code inside the <head> of your html. — Mikhail
– Mikhail, Commented Nov 5, 2010 at 18:12
Alternatively you could try adding the images in after the page has loaded with javascript. This will of course break for users who don't have javascript. @Mikhail's suggestion sounds reasonable. — zzzzBov
– zzzzBov, Commented Nov 5, 2010 at 18:14

generalhenry · Accepted Answer · 2010-11-05 18:15:37Z

1

You can use an ajax callback to delay until the background image is loaded

$.ajax({ url: "backgroundimage.png", success: function(){
        startSlideshow()
}});

answered Nov 5, 2010 at 18:15

generalhenry

17.3k4 gold badges51 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Jquery - load certain image first

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related