모든 콘텐츠가 렌더링 될 때까지 javascript created div를 숨기기

웹에서 모달로 표시 할 콘텐츠를 가져와야하는 모바일 웹 페이지가 있습니다. 모달 자체는 닫을 때 display:none으로 설정된 div 컨테이너 인 Javascript를 통해 생성됩니다. 모든 콘텐츠가 렌더링 될 때까지 javascript created div를 숨기기

<body> 

    Display this content: 
    <button onclick="displayModal()">display</button> 

    <script type="text/javascript"> 
    var htmlContents = "<div>some pretty heavy content</div>"; 
    var modal = //some code to create the modal div element. 
    modal.style.display = 'none'; 

    function displayModal() { 
     modal.innerHTML = htmlContents; 
     modal.style.display = 'block'; 
    } 
    </script> 

</body>

그런 다음 사용자는 우리가 여기에서 문제는 내용이 우리가 innerHTML을에 추가하는 것입니다 일부 HTML과 DIV의 innerHTML 채우고 다음 display: block

에 모달 스위치, 버튼을 클릭 할 수있다 꽤 무거워. 렌더링에 다소 시간이 걸릴 수있는 많은 이미지와 CSS (오래된 기기에서는 1 ~ 2 초). 그러나 그들은 하나씩보기로 팝업을 시작합니다. 따라서 사용자는 사물을 렌더링하는 동안 이미지와 div를 볼 수 있습니다.

모든 내용을 화면 밖으로 렌더링 한 후에 모달을보기 전용으로 전환 할 수있는 방법이 있습니까?

P.S : 성능이 문제이므로 jquery 또는 다른 라이브러리가 아닌 순수한 자바 스크립트로 작성되었습니다.

출처

2016-07-15 roloenusa

당신은 이미지를 다운로드 할 수있는 대역폭을 고려 할 수 있습니다 렌더링보다 성능 병목 현상이 더 클 것인가? – Timo

html을 container.querySelectorAll ('img')을 수행 한 다음 컨테이너에 삽입하고 onload 이벤트를 모두 첨부 할 수 있습니다. 마지막 이미지가로드되면 디스플레이를 트리거합니다 : 블록; 하지만 사용자가 콘텐츠를로드로보고 싶어한다고 생각합니다. –

@ Vitim.us 어떻게 모든 이미지가로드되었는지 알 수 있습니까? – roloenusa

나는 이것을 할 수있는 몇 가지 방법이 있다고 생각합니다. modal.innerHTML = htmlContents를 displayModal() 함수 밖으로 이동하면 사용자가 클릭하기 전에 이미지와 모달 내용을로드 할 수 있다고 생각합니다. 그래서 다음과 같이 보일 것이다 : 나는 또한 도움이 될 수 있습니다이 jQuery 라이브러리를 발견

<body> 

    Display this content: 
    <button onclick="displayModal()">display</button> 

    <script type="text/javascript"> 
    var htmlContents = "<div>some pretty heavy content</div>"; 
    var modal = //some code to create the modal div element. 
    modal.style.display = 'none'; 
    modal.innerHTML = htmlContents; 

    function displayModal() { 
     modal.style.display = 'block'; 
    } 
    </script> 

</body>

, 그것은 많은 사람들처럼 보인다 것은 그것을 사용하고 있습니다 : https://github.com/desandro/imagesloaded

출처

2016-07-15 01:50:51

함수 블록 내에서 modal.innerHTML = htmlContents를 지정하는 것은 중요하지 않습니다. htmlContents는 밀리 초의 분수를 할당하는 문자열이기 때문입니다. jquery 라이브러리는 좋은 옵션처럼 보입니다. – ceckenrode

일부 요구 사항은 외부 라이브러리를 사용하지 않는 것입니다. 그래도 감사합니다. – roloenusa

모든 콘텐츠가 렌더링 될 때까지 javascript created div를 숨기기

답변

관련 문제