Kodax - Full Screen Landing Page

Hey AussieJay, I am currently working to get this translated as a WP theme. Stay tuned

Fantastic! Another question, are you available for customizations? I’d like to develop a design that incorporates elements of other site designs you’ve created into the one theme.

Hi Jay, Yes I do customisations. Email me to discuss

Certainly a page loader is one solution. What I actually want is for users to look at slide1 (

etc.) for 10-15 seconds until everything loads. In my particular case, the above described solution is better than the users’ current viewing experience. In other words, I am presently forced to read the feature text underneath the slides (e.g. <!- INSERT FEATURE TEXT -> etc.) for 10-15 seconds until the slides load. Thanks

Hey, Load times can always vary, and with full screen images it is important to crunch/compress the images as much as possible.

Whilst it’s not possible to preload just the first image at the moment, I have tried some alternative css tricks to alleviate the blank header while your slides load.

The best method is to set a min height for #slides div and then you can set a background image or color for it. Once the slides load this background image will simply be covered up by the slides.

#slides{
    min-height: 480px;
    background-color: #333; /* or use background image */
}

I note it would be important to set a general min-height that won’t be larger/higher than the slides themselves, especially on mobile devices. So I would also set individual min-heights in each of the Media Query break points for #slides. So for iPhones you wouldn’t want to set a min-height larger than the 480px high screen, however for desktop you could comfortably set it to 700px high.

This is not perfect solution for the viewing experience you want, my preference would still be to use a page loader script. Also going back to my first point making sure you have compressed your images as much as possible really does make a massive difference to load times.

Thanks!