javascript - 预加载器不会立即在移动设备上加载

Question

const blackLogo = document.querySelector(".preloader__fillBlack");
const whiteLogo = document.querySelector(".preloader__fillWhite");
const blackLogoS = document.querySelector(".preloader__fillBlack path:nth-child(6)");
const blackLogoK = document.querySelector(".preloader__fillBlack path:nth-child(7)");
const whiteLogoS = document.querySelector(".preloader__fillWhite path:nth-child(6)");
const whiteLogoK = document.querySelector(".preloader__fillWhite path:nth-child(7)");


const preloaderBody = document.querySelector('.preloader__body');



function strokeBlack() {
  blackLogo.style.display = 'none';
  whiteLogo.style.display = 'inline-block';
  whiteLogoS.style.strokeDasharray = '1259.767333984375'; // value achieved from looping over the paths and setting getTotalLength() method on the obj
  whiteLogoS.style.strokeDashoffset = '1259.767333984375'; // initial value same as strokeDasharray which makes it completely invisible
  whiteLogoS.style.animation = 'lining 5s ease forwards'; // animating the strokeDashoffset to 0 so to make it visible
  whiteLogoK.style.strokeDasharray = '284.826171875'; //same
  whiteLogoK.style.strokeDashoffset = '284.826171875'; //same
  whiteLogoK.style.animation = 'lining 1.5s ease forwards 3.5s'; //same
  preloaderBody.style.animation = 'toBlack .2s ease-in forwards 4.6s'; // animating the bg color once previous animation ended
}


function strokeWhite() {
  whiteLogo.style.display = 'none';
  blackLogo.style.display = 'inline-block';
  blackLogoS.style.strokeDasharray = '1259.767333984375'; //same
  blackLogoS.style.strokeDashoffset = '1259.767333984375'; //same
  blackLogoS.style.animation = 'lining 5s ease forwards'; //same
  blackLogoK.style.strokeDasharray = '284.826171875'; // value achieved from looping over the paths and setting getTotalLength() method on the obj
  blackLogoK.style.strokeDashoffset = '284.826171875'; // initial value same as strokeDasharray which makes it completely invisible
  blackLogoK.style.animation = 'lining 1.5s ease forwards 3.5s'; // animating the strokeDashoffset to 0 so to make it visible
  preloaderBody.style.animation = 'toWhite .2s ease-in forwards 4.6s'; // animating the bg color once previous animation ended
}




function preloader() {

  const color = ["white", "black"];
  let i = 0;

  strokeWhite(); //animate stroke white at the begining
  const strokeAnimation = setInterval(() => {
    backgroundTimer(); // change background color on every 5.5sec
  }, 7500);


  function backgroundTimer() {

    preloaderBody.style.background = color[i];
    strokeBlack(); // when i is more than 0 -- animate stroke black
    i++;


    if (i >= color.length) {
      strokeWhite(); // when i is 0 -- animate stroke white
      i = 0;


    }
  }
}



preloader(); // Initialize Preloader

.preloader {
  &__body {
    width: 100%;
    height: 100vh;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__logo {
    width: 25%;
    max-width: 10em;
  }
  &__fillBlack,
  &__fillWhite {
    width: 100%;
  }
  &__fillBlack {
    display: none;
  }
  &__fillWhite {
    display: none;
  }
}

@keyframes lining {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes toWhite {
  to {
    background: white;
  }
}

@keyframes toBlack {
  to {
    background: black;
  }
}

<div class="preloader preloader__body">
  <div class="preloader__logo">
    <svg class="preloader__fillBlack" id="black" width="470" height="459" viewBox="0 0 470 459" fill="none" xlink:href="http://www.w3.org/2000/svg">
                <path d="M405.566 113.363C384.35 100.244 361.409 94.0961 329.023 92.8966C302.334 91.922 275.045 103.767 257.652 123.859C240.409 143.801 236.286 177.762 248.581 199.578C265.749 230.09 305.258 235.863 343.567 241.41C358.935 243.66 373.479 245.759 386.749 249.432C404.517 254.305 427.607 263.751 445 281.744V147.399C443.576 145.6 442.076 143.876 440.577 142.226C430.606 131.281 418.836 121.535 405.566 113.363Z" fill="black"/>
                <path d="M197.902 364.81C193.479 356.338 191.304 350.491 188.456 343.069C185.232 334.597 181.259 324.101 171.887 304.01C157.793 274.022 151.796 265.925 146.473 259.703C133.278 244.334 119.484 235.863 111.312 230.84C95.9437 221.394 84.0986 217.045 75.5521 214.721L20 264.201V449.075H289.064C272.871 443.302 261.626 436.555 258.102 434.306C222.042 411.216 203.899 376.28 197.902 364.81Z" fill="black"/>
                <path d="M391.547 449H445.075V412.565C426.633 434.756 402.642 444.727 391.547 449Z" fill="black"/>
                <path d="M63.1822 190.581L250.23 24H20V229.041L63.1822 190.581Z" fill="black"/>
                <path d="M125.032 208.499C133.953 213.972 150.446 224.168 166.34 242.61C174.286 251.831 181.633 263.002 195.653 292.839C205.549 313.831 209.897 325.376 213.046 333.772C215.669 340.595 217.469 345.543 221.217 352.74C226.915 363.76 242.059 392.923 272.196 412.19C277.669 415.714 327.074 445.626 380.377 425.235C392.372 420.662 424.234 408.442 437.128 374.856C444.475 355.663 445.975 327.625 432.855 308.208C419.81 289.016 396.87 279.42 379.852 274.772C368.157 271.548 354.362 269.524 339.818 267.425C297.311 261.277 249.181 254.23 225.715 212.472C207.873 180.76 213.12 135.254 237.86 106.691C260.651 80.3768 295.062 65.4579 329.997 66.7324C367.257 68.0818 394.021 75.3539 419.361 91.0974C428.507 96.795 437.128 103.092 445 109.99V24H289.664L98.0429 194.63C105.84 197.778 114.836 202.202 125.032 208.499Z" fill="black"/>
                <path d="M458.345 143.051C455.946 139.977 453.322 136.679 450.323 133.38C439.302 121.235 426.408 110.739 412.538 102.118C386.299 85.9245 359.835 80.8266 329.548 79.7021C298.81 78.5775 267.923 91.922 247.756 115.162C227.365 138.778 221.667 178.361 237.186 205.875C264.924 255.28 336.67 249.057 383.3 261.952C406.466 268.324 429.856 280.319 443.651 300.711C458.794 323.052 458.719 354.839 449.348 379.429C434.354 418.488 397.545 432.582 385.025 437.38C325.199 460.32 270.697 426.659 265.074 423.136C231.938 401.994 215.37 370.058 209.522 358.662C200.601 341.494 201.425 335.947 183.733 298.312C169.338 267.725 162.741 258.428 156.369 251.007C142.125 234.438 127.356 225.217 118.135 219.519C98.2678 207.3 83.4239 202.651 71.8037 200.252L9.20444 256.029" stroke="white" stroke-width="27" stroke-miterlimit="10"/>
                <path d="M71.8786 200.402L284.566 10.9554" stroke="white" stroke-width="27" stroke-miterlimit="10"/>
            </svg>

    <svg class="preloader__fillWhite" id="white" width="470" height="459" viewBox="0 0 470 459" fill="none" xlink:href="http://www.w3.org/2000/svg">
                <path d="M405.566 113.363C384.35 100.244 361.409 94.0961 329.023 92.8966C302.334 91.922 275.045 103.767 257.652 123.859C240.409 143.801 236.286 177.762 248.581 199.578C265.749 230.09 305.258 235.863 343.567 241.41C358.935 243.66 373.479 245.759 386.749 249.432C404.517 254.305 427.607 263.751 445 281.744V147.399C443.576 145.6 442.076 143.876 440.577 142.226C430.606 131.281 418.836 121.535 405.566 113.363Z" fill="white"/>
                <path d="M197.902 364.81C193.479 356.338 191.304 350.491 188.456 343.069C185.232 334.597 181.259 324.101 171.887 304.01C157.793 274.022 151.796 265.925 146.473 259.703C133.278 244.334 119.484 235.863 111.312 230.84C95.9437 221.394 84.0986 217.045 75.5521 214.721L20 264.201V449.075H289.064C272.871 443.302 261.626 436.555 258.102 434.306C222.042 411.216 203.899 376.28 197.902 364.81Z" fill="white"/>
                <path d="M391.547 449H445.075V412.565C426.633 434.756 402.642 444.727 391.547 449Z" fill="white"/>
                <path d="M63.1822 190.581L250.23 24H20V229.041L63.1822 190.581Z" fill="white"/>
                <path d="M125.032 208.499C133.953 213.972 150.446 224.168 166.34 242.61C174.286 251.831 181.633 263.002 195.653 292.839C205.549 313.831 209.897 325.376 213.046 333.772C215.669 340.595 217.469 345.543 221.217 352.74C226.915 363.76 242.059 392.923 272.196 412.19C277.669 415.714 327.074 445.626 380.377 425.235C392.372 420.662 424.234 408.442 437.128 374.856C444.475 355.663 445.975 327.625 432.855 308.208C419.81 289.016 396.87 279.42 379.852 274.772C368.157 271.548 354.362 269.524 339.818 267.425C297.311 261.277 249.181 254.23 225.715 212.472C207.873 180.76 213.12 135.254 237.86 106.691C260.651 80.3768 295.062 65.4579 329.997 66.7324C367.257 68.0818 394.021 75.3539 419.361 91.0974C428.507 96.795 437.128 103.092 445 109.99V24H289.664L98.0429 194.63C105.84 197.778 114.836 202.202 125.032 208.499Z" fill="white"/>
                <path d="M458.345 143.051C455.946 139.977 453.322 136.679 450.323 133.38C439.302 121.235 426.408 110.739 412.538 102.118C386.299 85.9245 359.835 80.8266 329.548 79.7021C298.81 78.5775 267.923 91.922 247.756 115.162C227.365 138.778 221.667 178.361 237.186 205.875C264.924 255.28 336.67 249.057 383.3 261.952C406.466 268.324 429.856 280.319 443.651 300.711C458.794 323.052 458.719 354.839 449.348 379.429C434.354 418.488 397.545 432.582 385.025 437.38C325.199 460.32 270.697 426.659 265.074 423.136C231.938 401.994 215.37 370.058 209.522 358.662C200.601 341.494 201.425 335.947 183.733 298.312C169.338 267.725 162.741 258.428 156.369 251.007C142.125 234.438 127.356 225.217 118.135 219.519C98.2678 207.3 83.4239 202.651 71.8037 200.252L9.20444 256.029" stroke="black" stroke-width="27" stroke-miterlimit="10"/>
                <path d="M71.8786 200.402L284.566 10.9554" stroke="black" stroke-width="27" stroke-miterlimit="10"/>
            </svg>
  </div>
</div>

> Blockquote

此预加载器在移动设备上几分钟后加载，但在台式机上运行良好。我希望它首先在所有设备上加载。它是使用 SVG 创建的自定义预加载器。有人可以使用香草Javascript或CSS帮助解决它，因为我无法弄清楚吗？

标签： javascripthtmlcsssvgpreloader