Jquery가 로딩 전환 마스크를 추가합니다.

이 글에서는 특정 참조 값을 갖는 Jquery를 주로 소개합니다. 이제 필요한 친구들이 참조할 수 있습니다.

webpack으로 h5 프로젝트 패키징 , CSS도 Bundle.js에 패키징되어 있습니다. 로딩이 느리면 페이지가 몇 초 동안 스타일 없이 보기 흉하게 나타날 수 있으므로 흰색 마스크를 설정하고 js가 로드된 후에 사라지기를 원합니다.
인라인 스타일과 함께 제공되는 본문에 로딩 블록을 넣습니다(따라서 처음 로드할 때 Bundle.js에 제공된 스타일 정보에 의존할 필요가 없습니다).

  <!-- index.html -->
  <p></p>

그런 다음 js가 로드될 때까지 기다렸다가 사라지는 메서드를 실행합니다. 여기서 조정에 약간의 노력을 기울이고 싶다면 animate()의 콜백 함수를 사용합니다. 그거, 공간이 많아요.

 //index.js(打包后出现在bundle.js里)
  $('#loading').animate({
    opacity: '0'
  }, function () {
    $('#loading').hide()
  })

효과는 다음과 같습니다

최적화 이전에도 이랬는데 아직도 차이가 많이 납니다
#🎜🎜 ## 🎜🎜#위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue를 사용하면 디지털 스크롤 증가 효과를 얻을 수 있습니다

위 내용은 Jquery가 로딩 전환 마스크를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!