자바 스크립트 실행 순서를 정의하는 방법

Question

내 웹 페이지 webpage link은 3 개의 자바 스크립트를 사용합니다. TabSlideOut 스크립트, SmoothDivScroll 스크립트 및 TN3 ​​이미지 갤러리 스크립트

페이지를 처음로드하거나 다시로드 할 때 많은 이미지를로드해야하기 때문에 TN3 이미지 갤러리 용 스크립트가 잠시 실행되며 시간이 오래 걸립니다.

이 시간 동안 SmoothDivScroll 용 스크립트는 대기하고 TN3 이미지 갤러리 용 스크립트가 끝날 때만 실행됩니다. SmoothDivScroll 스크립트의 이미지가 SmoothDivScroll 스크립트가 실행될 때처럼 원활하게 스크롤되는 대신 서로 보여지기 때문에이 시간 동안 페이지가 매우 추악 해 보입니다. 페이지를 새로 고침하면이를 볼 수 있습니다.

내가 달성하고 싶은 것은 SmoothDivScroll 용 스크립트가 먼저 실행되고 그 다음에 만 TN3 이미지 갤러리 용 스크립트가 실행되어야한다는 것입니다. 또는 웹 페이지가 다시로드 될 때 못 생기는 것을 막을 수있는 다른 것.

저는 경험이 많은 웹 구현자가 아니며 자바 스크립트 프로그래밍 지식도 없습니다. 나는 해결책을 찾기 위해 이틀 동안 노력했지만 나는 고생했다. 누군가가 내 문제를 해결하는 데 도움이되기를 바랍니다. 감사합니다.

Answer 1

실행 순서를 결정하기 위해 스크립트의 순서에만 의존해서는 안됩니다. 전화 TN3을 SmoothDivScrollcomplete 메서드에서 호출되는 함수에 넣습니다.

이렇게하려면 비 압축 버전을 사용하는 것이 가장 쉽습니다.

Answer 2

저는 이것을 FOUC 문제로 부릅니다. (예 : "Unstyled Content의 플래시"). 매우 일반적인. 1900 년대 후반부터 주변에 있었고, 사파리는 이것을 악명 높습니다.

짧은 답변 : 처음에는 인라인 스타일로 요소에 visibility:hidden을 설정합니다. 그런 다음 JavaScript를 사용하여로드 한 후 visibility:visible을 설정하십시오.

일반적으로 솔루션은 콘텐츠가로드 될 때까지 콘텐츠를 숨긴 다음 준비가되면 표시합니다. 콘텐츠가로드되는 동안 종종 어떤 종류의 회 전자가 표시됩니다.

기술적으로이 작업에는 많은 방법이 있습니다. CSS display, visible 및/또는 opacity 설정을 전환 할 수 있습니다. z-index 인 오버레이 div를 표시 할 수 있습니다.이 광고는 id="veil"과 함께 "베일"이라고 부르며 내용이로드 될 때 제거하고 베일로 회 전자를 사용합니다. 또한로드 할 때까지 화면에서 완전히 이동 한 다음 제자리로 옮길 수 있습니다. 이 방법들을 결합 할 수 있습니다.

개인적으로 CSS visibility 속성을 사용하여 교차 브라우저 및 교차 장치를 가장 효과적으로 사용했습니다. 레이아웃에서 객체의 공간을 예약하는 방법을 좋아합니다. 모바일 및 일부 구형 브라우저에서 다른 솔루션이 가끔씩 나타납니다. 시작하려면 몇 가지 미리보기가 있습니다.

먼저 가시성을 none으로 설정하고 인라인 스타일을 지정하십시오.
- 면책 조항 : 본인은 인라인 스타일의 팬이 아니며, 관심사 분리의 개념을 이해합니다. 이 경우 가장 높은 순위 우선 순위가 있어야하고 가능한 한 빨리 적용해야하며 교차 환경에서 성공한 결과를 얻었으므로 필요하다고 생각합니다.정통파는 이것이 CSS 파일에 있어야한다고 주장하지만, 나는 교리 적으로 어떤 지침도 따라야한다고 믿는다. 때때로 우리는 강한 정당성이있을 때 대회를 중단 할 용기를 가져야합니다. 독자가 결정하게하십시오.

<div id="pan-content" class="clearfix" style="visibility:hidden"> 

그런 다음 페이지로드 (jQuery를 사용하여) : 당신이 배너를 표시 할 때까지 전체 창이로드 될 때까지 대기하고 있기 때문에

$('#window').load(function() { 
    $('#pan-content').css({visibility:'visible'}); 
}); 

이 조금 느린 것을 입증 할 수 있습니다. 또한 이벤트를 특정 리소스에 첨부 할 수 있으므로 작업 속도가 빨라집니다. 다음 게시물을 참조하십시오.
Detect image load

희망이 있습니다.