Member Avatar for kouroshnik

I have a website at:

this site is hosting by a company that provides charge for mtn Operators... I dont access to any control panel,the only panel i have access is a template panel that I can add some javascript or html and meta tags . I know Jquery a bit.But all changes submits after page load. all elements display to visitor , then jquery submits changes ... plaese give some new idea. thanks

  • 4 Contributors
  • 3 Replies
  • 418 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by webprefection

Dani AI

Generated

Short summary and practical fixes for the flash-of-unstyled (or flash-of-old-state) issue described by : the flicker happens because the page renders, then your jQuery runs and changes elements. With only template-level access (you can add small HTML/JS/meta), the safest pattern is to (1) mark that JavaScript is present early, (2) hide only the elements that will be rewritten, and (3) reveal them after your jQuery finishes. That preserves a no-JS fallback (as hinted) and avoids the blunt, site-wide hide suggested by .

Place this as early as possible in the <head> (before stylesheet links):

<script>
(function(){
  // mark JS users quickly
  document.documentElement.className += ' js';

  // selectors for parts your jQuery changes — replace with your IDs/classes
  var sel = ['#charge-area', '.price', '.promo'];
  for (var i = 0; i < sel.length; i++) {
    var el = document.querySelector(sel[i]);
    if (el) el.classList.add('hide-until-ready');
  }
})();
</script>

<style>
/* only hide for JS users, and preserve layout to avoid jumps */
.js .hide-until-ready { visibility: hidden; }
</style>

Then, at the end of your jQuery code (after all DOM changes) remove the helper class so elements become visible:

// run this after your existing jQuery modifications finish
$('.hide-until-ready').removeClass('hide-until-ready');

If you can edit link tags, another approach is preloading the stylesheet so it arrives sooner:

<link rel="preload" href="/path/to/main.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/path/to/main.css"></noscript>

Troubleshooting notes: put the small script truly first in the head; hide only specific selectors — hiding the whole body breaks accessibility/SEO; prefer visibility:hidden over display:none to avoid layout jumps; test with DevTools network throttling. If the template forces scripts to the bottom, server-side rendering or getting the final HTML from the host (so the page already contains the final markup/CSS) is the only robust fix.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

So what are you trying to do...style after the page is loaded, or your title suggests prevent the stylesheet from loading? Im not sure exactly what you are trying to do..please clarify.

Member Avatar for Myronz

If you want to take into consideration users with JavaScript disabled I would recommend after the css place the html below, that way you are not completely blocking them from the site however it will not have the effect you wish.

Member Avatar for webprefection

You could style the body to not display with css like

body{
      display:none;
    }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.