Стили скачут при перезагрузке страницы с участием localStorage, как исправить?

Question

У меня такая проблема.

HTML:

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

CSS:

black{background:#000}

Jquery:

$(function () {

    if (localStorage.chkbox && localStorage.chkbox != '') {
        $('#checkbox').attr('checked', 'checked');
  $('body').addClass('black')
    } else {
        $('#checkbox').removeAttr('checked');
  $('body').removeClass('black')
    }

    $('#checkbox').click(function () {

        if ($('#checkbox').is(':checked')) {
            localStorage.chkbox = $('#checkbox').val();
    $('body').addClass('black')
        } else {
            localStorage.chkbox = '';
    $('body').removeClass('black')
        }
    });
});

Ссылка, чтобы посмотреть: https://jsfiddle.net/r4yo9Leb/1/

Скрипт выполняет свои задачи, но при перезагрузке страницы, идёт заметная смена стилей. Как это можно исправить? И вообще возможно ли такое?

Answer 1

$(function () {
  // ...
});

Это в jQuery значит «Выполнить код после полной загрузки DOM».
Должно стать лучше, если вынести смену класса body из этой функции и разместить такой скрипт где-то вначале body.

let isChecked = localStorage.chkbox;

if (isChecked) {
  $("body").addClass("black");
} else {
  $("body").removeClass("black");
}

$(function() {
  let $cb = $("#checkbox");
  
  if (isChecked) {
    $cb.attr("checked", "checked");
  } else {
    $cb.removeAttr("checked");
  }
  
  $cb.on("click", function() {

    if ($cb.is(":checked")) {
      localStorage.chkbox = $cb.val();
      $("body").addClass("black");
    } else {
      localStorage.chkbox = "";
      $("body").removeClass("black");
    }
    
  });  
});

БЛОГ НА HUSL

Стили скачут при перезагрузке страницы с участием localStorage, как исправить?

Ответы (1 шт):