CSS / jQuery feature content sliders and page load time

Hi folks,

I’ve been finding a lot of good resources for featured content sliders online and had been starting to use many of them. I copied some links below of what I have been working with in some designs.

My concern about all of these is that most of the code for the tabs or slides is hidden HTML code on the page that loads along with the rest of the page. If each slide contains an image, which may be 70-80k depending on the size of the slide, how do you ensure that the content is loaded when the tab is clicked or when the slide autochanges rather than loading all the page content and images at once? I am mainly concerned with massive page load times for what should only be one page.

Here are some examples:


Thanks for suggestions and advice in advance!

Yes, the problem with using other people’s JavaScript and not understanding how it works is that you’re stuck with whatever they dish out to you.

Most scripts out there (including the ones you linked to) break badly if JS is off, which is a serious strike against them. And as you say, they will want to download all of the images at once.

A better scenario, IMHO, is to have a series of links to other pages, which JS then intercepts and renders on the same page. Then, if JS is disabled, at least the links can be followed in the normal way.

Unfortunately, the best way to ensure good scripts is to write them yourself (yes, I know only too well that’s easier said than done! I’m a JS noob and wondering if I’ll ever get my head around it sufficiently).

Otherwise, the best advice I can give is to hunt around until you find a slider that does what you want… assuming some good soul out there in internet land has bothered to create one and put it online!

If I stumble across one I’ll let you know. :slight_smile:


You can’t really have it both ways as the slideshow should work smoothly but for that to happen it needs the images to be preloaded.

You could instead use the lightbox type scripts which only requires the thumbnails to be present.