javascript - 骨架 css 直到页面完成加载

Question

我想制作一个骨架 css 直到页面完全加载。我想到了这个解决方案。因此，如果 javascript 被禁用，我不会有任何问题。那是对的吗？也许你有更好的解决方案？谢谢!

 .slider {
      width: 100%;
      height: 100%;
      margin: auto;
      background-color: #fff;
      position: relative;
      display: flex;
      overflow: hidden;
      z-index: 1;
    }

    .slider2 {
      width: 100%;
      height: 100%;
      margin: auto;
      background-color: #red;
      position: relative;
      display: flex;
      overflow: hidden;
      animation: fading 2s infinite;
      z-index: 1;
    }



 <div class="slider" style="display: none;"><div class="slider2"></div></div>


$(() => {

    const ph = $('.slider');


    let toggleEffect = () => {
      ph.show();
      $(window).on('load', function() {
        ph.hide();
      });
    };

    toggleEffect();

  });

Answer 1

请尝试document.ready

$(document).ready(function() {
   ph.hide();
});