2017-02-20 7 views
0

웹 사이트를 만들고 있는데 문제가 있습니다. 아니면 정확하게, 빈 페이지 문제를 해결하는 방법을 모르겠습니다.웹 사이트 프리 로더 jQuery

오른쪽으로 스 와이프하면 일부 데이터가 데이터베이스에 삽입되고 웹 페이지가 새로 고침되는 웹 사이트를 만들고 있습니다. 새로 고침 후 빈 페이지가 표시되고 일반 웹 페이지가 모두 HTML로 표시됩니다.

DOM을 준비하기 전에 어떻게 빈 페이지에 로더 이미지를 넣을 수 있습니까? jquery와 jquery mobile을 사용하고 있습니다.

웹 페이지는 http://meetmean.comxa.com/KlausApp/home.php입니다. 오른쪽 또는 왼쪽으로 스 와이프하면 경고 상자가 표시되고 페이지가 새로 고침됩니다. 뒤에 표시되는 빈 페이지가 로딩 이미지가되도록합니다.

+0

https://www.w3schools.com/howto/howto_css_loader.asp – bens

답변

1

나는이 같은 문제의 종류를 가지고 내 솔루션입니다 : 내가 전체 화면 블랙으로 HTML의 페이지 (당신에 대해 이야기 한 빈 하나를) 포함 페이지가 완전히 HTML 본문의 모든 내용이 완전히로드 될 때 실행됩니다

window.onload = function() { $('body').toggleClass('loaded'); }; 

이 기능을 자바 스크립트

를 사용하여로드 할 때 배경 및 사업부에서 CSS 애니메이션, 그리고 그 사업부를 숨 깁니다. 이 코드는 내 body.css 파일에 의 HTML 본문에 loaded라는 클래스를 추가하여로드 된 클래스가 전체 화면 div를 숨길 것입니다. 그것은 귀하의 페이지에 로더를 갖는 방법 중 하나 였고 그것은 당신에게 달렸습니다. 이것을 수행 할 수있는 많은 방법이 있습니다.

0

SVG 애니메이션 파일을 가져 와서 페이지에 표시하려는 위치에 유지하십시오. 이전에 표시 속성을 none으로 유지하십시오. 사용할 수있는 데이터를 가져 오기 위해 (jQuery) AJAX (즉, $.ajax())를 사용하고 있습니다. 완료 애니메이션이 올 때 SVG를 페이드 아웃하는 AJAX 옵션의 콜백 함수. 여기

function ajaxCall(){ 
    $("#svg").fadeIn("slow"); 
    $.ajax({url: "demo_test.txt", complete: function(result){ 
     $("#svg").fadeOut("slow"); 
    }}); 
} 

는 곧 함수가 호출로 SVG 애니메이션이 나타납니다 .. 그리고 AJAX 응답을수록 곧 SVG는 페이드 아웃된다. 로딩 애니메이션을 가져올 수 있습니다. http://loading.io