Loading Sequence of JQuery objects in Firefox different than in Chrome/Opera?

Question

I have problems with the loading sequence of jQuery objects in a HTML and Javascript file when executed on Firefox. I have several <div> and <button> tags with different id. The page starts with following code:

<script>
$(document).ready(function () {
   $("#id_1").show();
   $("#id_2").hide();
   $("#id_3").hide();
   ...
});

$(document).ready(function () {
   $.getJSON("JSON_file.json", function (json) {
      if (json.option[number] == "b") {
         $("#id_2").show()
      };

      if (json.option[number] == "c") {
         $("#id_3").show()
      };
   });
});
</script>

In Chrome and Opera I have no issues with this code. The objects "#id_2" and "#id_3" are not visible on load. However in Firefox both "#id_2" and "#id_3" are visible for a short moment before being hidden. But I don´t want them to be visible at the begin.

I use localhost to open the files.

Does anybody know what I´m doing wrong?

Answer 1

Hello You can add default hide call in div and then remove that call on condition basic. Like

<div id="#id_1" class='hide'>
My Div 1
</div>
<div id="#id_2" class='hide'>
My Div 1
</div>
<div id="#id_3" class='hide'>
My Div 1
</div>

Now your script code

<script>


$(document).ready(function () {
   $.getJSON("JSON_file.json", function (json) {
      if (json.option[number] == "b") {
         $("#id_2").removeClass('hide')
      };

      if (json.option[number] == "c") {
         $("#id_3").removeClass('hide')
      };
   });
});
</script>