How can I fix this glitchy page loading problem? – Themeco Community

How can I fix this glitchy page loading problem?

M Pez — Tue, 28 Jan 2014 04:03:12 +0000

I have an Integrity home page with a Revo Slider above the menu. When the page loads it shows the page content for a second or two and then the Revo Slider comes in after. It looks pretty terrible. Can you please tell me how to fix this problem?

Your demo page loads normally: http://theme.co/x/
Mine does not: http://goo.gl/1bLs8s

Also, how can I replace that little down arrow icon with my own PNG graphic? Your image renders fine on FireFox but it’s a little messed up looking on Safari OSX. It’s not smooth and the circle looks faceted.

And…one other problem that I need to resolve. On an iPad the down arrow icon is touching the bottom of the page. How can I force it to obey the margins?

Reply To: How can I fix this glitchy page loading problem?

Kory — Tue, 28 Jan 2014 04:11:18 +0000

Hey,

Our homepage demo is not using Revolution Slider up top. It is slightly modified for our sales purposes. There is no way to alleviate the slider “glitch” as the JavaScript used to calculate the full height of your browser window must wait until after everything loads, which can take time to parse and fully complete if you are using the fullwidth slider.

You can update the scroll bottom anchor using a child theme and modifying template markup as needed. The slider Views are in /framework/views/global/ that you’ll want to update.

Also, I can’t seem to replicate the error with the down error on our iPad here.

Thanks!

Reply To: How can I fix this glitchy page loading problem?

M Pez — Tue, 28 Jan 2014 05:11:19 +0000

Wow, it’s really surprising to me that this glitch cannot be fixed. I could understand if I was trying to do something that your theme was not intended to do…but this is a built-in feature. 🙁

It sounds like that I am currently in a no-win situation with my client. I have sold them on having a page with an animated slider above menu. They loved it but they hated the redraw glitch. When I saw that your home page did not have the same problem I told them that I would be able to fix it.

I must resolve this problem somehow. Can you please provide us with the same solution that you are using on your own page? Maybe if we can see what you are doing we can come up with a way to minimize the redraw issue.

I am not a web programmer but couldn’t we do something like this to fix it? Load a page with a blank gap at the top that is taller than the average display (perhaps 1300px tall). So instead of user seeing the menu and the content flash they would just see white…or a color and then the slider.

Then after the page loads and the JavaScript has calculated the window size, couldn’t you simply hide the spacer/dummy image that you used to push the page content out of view so when the user scrolls all looks normal?

Reply To: How can I fix this glitchy page loading problem?

Kory — Tue, 28 Jan 2014 05:22:32 +0000

Hey there,

The currently solution that the sales page uses employs some extensive CSS to get this working. You have to specify the height of every parent element of the “slider” area to be 100%, and then do some additional repositioning beyond that. Additionally, you won’t be able to position or animate layers the way you can with the slider. If you’ve optimized your site in every other way possible (gzip compression, compress media as much as possible such as images and video, enable caching of resources, utilize a CDN if at all possible, et cetera), you should be able reduce this effect as much as possible. Again, it isn’t a “glitch,” it’s merely a reality of using this feature with Revolution Slider when you calculate the fullwidth screen size. Take note that if you switch to a “fixed” height, this will not happen.

There are a couple other options you could try. The following JavaScript is not ideal, but nothing will be visible until all content, iframes, remote scripts, fonts, and images are downloaded while using it (for a maximum of three seconds). You’ll want to run this in the somewhere, which you will need to enqueue or add via a child theme:

(function(){
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    var r = document.getElementsByTagName('script')[0];
    r.parentNode.insertBefore(s, r);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000);
  }
})();

Additionally, (and probably better) you could take advantage of the Min. Fullscreen Height setting on your slider within the plugin. This will pretty much do exactly what it says it will do and set a minimum height for your slider when using the fullscreen setting. You can set this to a height closer to a normal browser size on a standard desktop to avoid so much of a jump on page load.

Thanks.

Reply To: How can I fix this glitchy page loading problem?

M Pez — Tue, 28 Jan 2014 16:52:21 +0000

The down arrow icon touches the bottom of the iPad browser when it’s in a horizontal orientation. Vertical loads normally.

Here are screen captures from my iPad:

Reply To: How can I fix this glitchy page loading problem?

M Pez — Tue, 28 Jan 2014 20:53:30 +0000

By the way, your home page exhibits the same clipping problem on an iPad in horizontal mode, except on your page it’s clipping off the bottom of your menu. I am guessing that whatever is causing this problem on both sites is related.

Reply To: How can I fix this glitchy page loading problem?

M Pez — Tue, 28 Jan 2014 21:40:21 +0000

Great, your JavaScript worked perfectly! It hides the loading glitch in FireFox. Do you have a similar script that I can use for other browsers? Specifically, Safari on a Mac and iPad, which is what my customer is using. Thanks.

Reply To: How can I fix this glitchy page loading problem?

Kory — Wed, 29 Jan 2014 03:42:16 +0000

Hey there,

You can try removing the if statement inside the function and that should give you what you want.

Thanks!

Reply To: How can I fix this glitchy page loading problem?

M Pez — Wed, 29 Jan 2014 23:56:15 +0000

That solved the Safari problem. Thanks!

Reply To: How can I fix this glitchy page loading problem?

Rubin — Thu, 30 Jan 2014 00:03:51 +0000

You’re welcome!