[Resolved] on webpage refresh browser flicker

[Author]

Posts

[rexJ-2]

I am trying to:
hi, I want to refresh a page every 5 seconds without flicker. But maybe because of view inside a view or something else the page on refresh are flickering and showing other view ofr a split second. How to fix that?

Have a webpage that shows a view. That webpage is set to refresh every 5 seconds.

   var timer_is_on = 0;
    var t;
 
    function timedCount() {
        setTimeout(function () {
          window.location.reload(1);
      }, 5000);  // After 5 secs
    }
    
 if (!timer_is_on) {
        timer_is_on = 1;
        timedCount();
    }

Link to a page where the issue can be seen:
hidden link
I expected to see:
A webpage that show the only the refreshed actual view
Instead, I got:
a view splashing up behind the actual view

[Waqar]

Hi,

Thank you for waiting, while I performed some tests and investigation around your report.

The flicker of incomplete or improperly styled HTML that is seen on page refresh is not something specific to Toolset or any specific plugin, and it relates to how web browsers render a web page.

When the page loading starts, page's markup or HTML is loaded sequentially, while the other resources like CSS files, script files, and images, etc are loaded, as they're called in the page's order. Until all these resources have loaded completely, the incomplete or improperly styled page starts showing, which attains its full final shape or form, only when page's loading has completed (and all resources have been loaded).

The duration of this flicker will vary based on the factors like the amount of the overall content on the page ( i.e. page's markup length and number of resources like images, CSS & script files, etc ), the speed of visitor's internet connection and whether some of the content from the page has been cached by the browser, from the previous visit or not.

While it may not be possible to completely eliminate this flicker on page reload/refresh, following are some suggestions, which can improve this situation:

1. First, I've noticed that your views include CSS code and script code, directly in the content areas. Toolset Views plugin offers dedicated "CSS editor" and "JS editor" tabs, which can be used to include CSS and scripts safely.

Screenshot: hidden link

Here are some useful guides on the topic:
https://toolset.com/documentation/user-guides/adding-custom-css-views/
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/

2. To make sure all custom CSS code is available sooner in the page's content for better loading experience, you can consolidate all your custom CSS code blocks used in both views ( "tavle medarbejder vagtplan kompasset" & "allearbejdstidervagtplantavler" ), inside the "CSS editor" tab under the "Search and Pagination" section in the parent view ( "tavle medarbejder vagtplan kompasset" ).

Screenshot: hidden link

3. Likewise, you can relocate all JS code blocks used in both views, in the "JS editor" tab under the same "Search and Pagination" section in the parent view.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[rexJ-2]

Hi,
1:
I can see you point by moving css to the theme css and will do that. Actually it was in bootstrap 3 divs but there was too many problems so i moved i to bootstrap 4 flex box... however;
Had almost the same problem 6 month ago where Mr. Nigel said following:
"We have plans to revise this (there is no such compliance issue in HTML5) but for the time-being what you can do is move your CSS out of the custom CSS box.

I suggest you add it directly into the relevant editor sections (e.g. the Loop Editor just before the wpv-layout-end shortcode) inside style tags, e.g."

2: Many thanks for your time and solution will do that ...

3: Thanks for suggestion by moving javascript code. I will do that and see if it helps.

And thanks for taking your time..

[Waqar]

Hi,

Thanks for writing back and glad you found my suggestions useful.

You're welcome to share any follow-up related questions or updates here and for each new question/concern, feel free to start a new ticket.

regards,
Waqar

[rexJ-2]

Do you think this will work, the solution is

// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
  <p>This will be display:none until the CSS is applied!</p>
</div>

and then wrap the view in a div?

Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled

[Waqar]

Hi,

Thanks for writing back.

This technique of holding/pausing the display of the content using custom CSS or JS script, until fully loaded can definitely improve the loading experience for the visitors, even though it may not remove the flicker completely.

Tip: instead of hiding a specific div, you can also try hiding the entire page body ( body tag ) until the page loading has completed, with a fade-in/fade-out effect.
( ref: https://stackoverflow.com/questions/32094742/jquery-refresh-page-with-fadein-and-fadeout )

regards,
Waqar