One page layout has 'chunky' loading behaviour.

[shariehunter]

Hi Satori Themes,

I’m having some trouble with how my website (http://www.arthur-hunter.com) is loading using the one page layout. On the first visit, you can see that the Our Work section loads first, with weird spacing, and then the slider image loads abruptly. It’s really important that the loading behaviour is smooth, so that users see the slider image load up first, then any subsequent sections load afterward. Essentially, I’d like to prevent the Our Work section jumping down once the slider loads up.

Is there any way to prevent this behaviour from happening?

Any help is seriously appreciated!

[satori]

Hey Sharie,

The slider loads discreetly from the rest of the page because it is based on jQuery; please not that the loading behaviour is not bug (it also happens in the theme demo). With a modern broadband Internet connection, it should take no more than 5-6 seconds to load the entire page.

I can see that the current version of the website you’ve linked to uses a single slide, i.e. the slider could be replaced by a header image, just like on some pages of the demonstration of the multi-page mode of the theme. You can upload a header image in the “Page Settings” section of the page editor mode e.g. for the “Our Work” page.

Alternatively, you can try using other third-party free or premium sliders instead of the one integrated with the theme.

Please let me know if this information is helpful!

Sincerely,
Andrii / Satori Studio

[shariehunter]

Hi Andrii,

Thank you for the quick reply! I’ll give your suggestion a try and replace the slider with a header image instead.

[see22]

(One page layout)

This may not be a bug, but it looks horrible.

The slider is actually loading over the second page (the “about” page in our case) which has jumped all the way to the top until the slider finishes loading. After the slider loads the second page abruptly jumps back down.

It’s sloppy and my client hates it.

http://www.gobleberriman.com/site3/

If there is no fix for this, we won’t even be able to use this template. There must be a way to change this behavior….There’s lot’s of one page templates with sliders out there that don’t load like that. I wish I had of noticed before the purchase.

As far as a using A different slider, the theme does not seem to allow adding any other content (including a different slider) to the ‘FRONT PAGE”.

Please try to help, thanks.

• This reply was modified 10 years, 5 months ago by see22.
• This reply was modified 10 years, 5 months ago by see22.
• This reply was modified 10 years, 5 months ago by see22.

[satori]

Hey See22,

the loading behavior of the slider is not determined by the theme itself but rather by the plugin which has been included with the theme (for free, I must note :) – the Slider Revolution, which is the most popular slider plugin on Envato Marketplaces. There are several measures I would recommend trying before switching to another slider:

First and foremost, I would advise reducing the size of all images in the slider, by down-scaling and/or reducing dimensions. Currently the images in the slider are over 1 Mb each (some even larger than 3 Mb, which makes the entire page load quite slowly (please see the detailed speed test here). It is highly recommended that any image in the slider does not exceed 300-400 Kb (the less, the better) – this will ensure quick loading of the entire page for all users.

Furthermore, I would recommend trying the “Lazy Load” option in the slider settings – please go to the “Revolution Slider” admin section, click on the “Slider Settings” for the slider you need to edit, and activate the “Lazy Load” option in the “General Settings” box (do not forget to save the changes). This will speed up the loading even further.

Thirdly, in case the above measures still leave space for improvement, or for some reason cannot be implemented, I can propose a more drastic solution – adding a preloading animation to the website, for example this one. I can recommend it because I’m using this code myself in my latest Shogun theme. A preloader will display its own screen until the website is fully loaded, avoiding any of the loading issues which may arise.

Finally, in case you still decide to go for another slider, please let me know which one, I will help you set it up and integrate it into the theme.

Sincerely,
Andrii / Satori Studio

[see22]

Andrii,

Thanks for the response and suggestions. The support is very much appreciated.

1. I did optimize the image slides & it helped with loading time.

2. I tried a pre-loader but it freezes at about 97% and the site never loads.
https://wordpress.org/plugins/loading-page/

3. I was reading one of the other KANSO support posts here, and it seems that the slider revolution that was included with the theme is not the latest version. The latest version of revolution slider seems to come with a built-in pre-loader. (correct me if I’m wrong). If the updated version does come with a pre-loader, con you tell me how to update it?

The version of the rev slider that is included works great with the KANSO multi-page version of your template, but the page jumping issue (without a pre-loader) on the one-page layout looks really un-professional.

4. If our client approves this site, we plan on purchasing an additional license (maybe two).

5. ALSO, The client has now insists that we have the slide images be “full bleed’ under the logo/navigation when the site first loads. LIke this behavior:

http://themeforest.net/item/accio-one-page-parallax-responsive-wordpress-theme/full_screen_preview/7059765

I’ve been trying to figure out how to do it but have not been able to. I really don’t want to lose the client, or have to switch themes at this point because of this. Could you tell me how to do this?

Thanks again for all your help!

• This reply was modified 10 years, 5 months ago by see22.
• This reply was modified 10 years, 5 months ago by see22.
• This reply was modified 10 years, 5 months ago by see22.

[satori]

Hey See22,

I will go over your comments using the same numbering:

1). Glad to hear! Some images I would still recommend working on, namely this and this – they’re well over 1 Mb each, which means there’s still some speed improvement possible.

2). I’ve tried several preloaders myself when I was building the Shogun theme, I can agree that a lot of them are quite prone to not working under certain conditions (hence the recommended one from my previous message – that one I know to work with my themes ;)

3). I’ve updated the Revolution Slider to the latest version in Kanso 1.6, which I am currently working on and which is due to be released in June. I’ve sent you the latest build to the email you’ve used when registering on this forum – please follow the instructions there to update the theme.

5). This wasn’t envisaged by the theme initially, thus some custom code will have to be added. Firstly, you will need to clear the “Offset Containers” field in the “Main Slider Settings” section of your slider settings page. Secondly, the header itself will have to be modified by adding some extra CSS (you can either insert it into the child theme’s style.css, in case you are using a child theme, or put it into the “Style: Add Custom CSS” tab of the Theme Options panel):

#main-header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}

#header {
background: transparent !important;
}


#main-header .smallheader {
background-color: #fff !important;
}

Sincerely,
Andrii / Satori Studio

[satori]

Hey See22,

the email that I’ve sent returned an error (it might be that the attachment was denied as too large) – could you please write to me to support@satoristudio.net from a functioning email with at least 5 Mb attachment ceiling (e.g. gmail). Thank you!

Sincerely,
Andrii / Satori Studio

[see22]

Ok.. I have emailed you and also given you access to a shared google drive in case email still does not work.

Thanks!

Someone suggested that the jumping issue may be relate to Alphabetical page order….does this sound possible?

[see22]

I got your email & implemented. the 1.6 template & new rev slider. Thanks!

1. I added the code that you provided above, and it the site looks perfect in full screen mode, but it has messed up the header & menus in mobile modes.

http://www.gobleberriman.com/site3/

What do I need to change in order to fix this? Also, as long as I have to make the adjustments, I would prefer that the header / menus stay at the top when in …”@media only screen and (max-width: 1030px) and (min-width: 767px)’ …. the same as they appear in full screen mode ……. (in other words, so navigation doesn’t move below the logo on a ipad / tablets)—There’s plenty of room at the top of those screens for my menus w/o pushing them below).

2. I’ going to implement the QueryLoader2 pre-loader the you suggested above to take care or the jumping issue, but I don’t know where to put the code in WP. Since you’ve done this before can you tell me where it goes?

3. I am in the process of optimizing ALL of the images on the site. I know that you are right about that!!

Thank-you.

[Author]

Posts