Question

I have the following HTML on my web page:

<input id="htmlEdit" type="checkbox"/>

Once the page has loaded the the checkbox gets styled using wijmo as follows:

   $(document).ready(function () {
      var store = window.localStorage;
      $('#htmlEdit').wijcheckbox();

This works but I have a problem in that there is a delay of 1-2 seconds between the page
showing and the element getting styled. During that delay I see the old style of checkbox.

Does anyone have any idea what I could do to reduce this delay? Can I for example make
the wijcheckbox() function fire earlier? I tried replacing document with #htmlEdit but that
didn’t work.

Answer 1

The challenge here is that in order to access a DOM element via javascript, the DOM element has to already be parsed by the browser and once it’s parsed by the browser, it may already be showing on screen unless it’s set to not be visible.

The best answer here is to control the initial look via CSS styles because that will be in force as the item is parsed and it’s first display will incorporate the CSS styles.

The fastest way you can run javascript on a given object is to put inline javascript immediately after the element in the HTML source:

<input id="htmlEdit" type="checkbox"/>
<script type="text/javascript>
$('#htmlEdit').wijcheckbox();
</script>

However, this gets messy quickly if you have to do this a lot and it’s generally not a good idea to intersperse your markup and JS.

So, if you can’t style it with CSS, then you’re probably better off making the object be initially hidden and then show it only after it’s been styled by your JS.

<input id="htmlEdit" type="checkbox" style="visibility: hidden" />

And, then make it visible in your JS after you’ve styled it appropriately:

$(document).ready(function() {
    $('#htmlEdit').wijcheckbox().css("visibility", "visible");
})

Note: I used visibility: hidden here instead of display: none because your page will layout properly and when the checkboxes become visible, the page won’t relayout as dramatically causing things to jump around. This seems preferable to seeing the layout without the checkboxes, then seeing it reposition when the checkboxes become visible. If the new checkbox style is dramatically different, it still may shift a bit when you add the new styling, but not as dramatically when using visibility.

---

If you had a bunch of these, you could make it automated with a class:

<input class="styledCheckbox" id="htmlEdit" type="checkbox">

CSS:

/* initially hidden until wij style is applied */
.styledCheckbox {visibility: hidden;}   

Javascript:

$(document).ready(function() {
    // add style to all checkboxes and make them visible
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible");
})