2012-04-22 6 views
4

HTML5에 웹 애플리케이션이 있습니다. 여기웹 페이지를 비동기 적으로로드 중

내가 비동기 적으로 전체 웹 페이지를로드하고 싶은 link

입니다. 웹 페이지에 액세스 할 때처럼 사용자에게 로딩 이미지를 표시하고 페이지가 백그라운드에서 비동기 모드로 완전히로드됩니다. 스크립트를 비동기 적으로로드하려고 시도했지만 동작에 많은 영향을 미치지 않습니다.

가능한 방법이 있습니까?

답변

1

Tobias Krogh와 같은 방법을 사용해보십시오.

그러나 오히려 .html 중에서 사용하여 본문에 내용을 넣어 보통 오래된 JS

document.body.innerHTML = request.responseText; 

사용 jQuery를 사용하여 #main의 내용을 넣는 것보다()

$("body").html(request.responseText); 

편집 : JS 로더를 사용하여 CSS & JS를로드하십시오. 가능 Lazyload 또는 YepNope을 비동기 적으로로드 할 수 있습니다. 그 일을해야합니다!

+0

해결되었지만 여전히 스크립트에 문제가 있습니다. –

2

당신이 DOM 준비에 Ajax 호출을 수행하고 원하는 내용을로드하는 스크립트 태그가 머리만을 배경으로하는 로딩 이미지가 빈 몸 ...

편집 렌더링 : 물론 원하는 내용은 응답과 함께 몸을 업데이트 ... 필요할 때마다 다른 마크 업 및 스크립트 태그를 포함해야

document.body.innerHTML = request.responseText; 

편집 2 : 당신은 필요로하는 기본 자바 스크립트 그 머리 스크립트를 작성하는 것이 좋습니다 덜 < 1kb는 (심지어 크로스 브라우저 아약스 작업) 정의 된 URL에 전화를 깨끗하게 ... 귀하의 아약스 응답에있을 수 있습니다 아무 것도 덮어 쓰거나 두 번로드하지 마십시오 (라이브러리를로드하는 경우 아약스 기능 외에도)

+1

나는 이것을 시도했다! 그러나 문제는 콘텐츠가 표시되고 있지만 스크립트가 더 이상 페이지에서 실행되지 않는다는 것입니다. –

+0

그래서이 앱은 더 이상 작동하지 않습니다. –

0

css에서 (처음에) 볼 수있는 로더와 함께 어떤 종류의 오버레이를 설정하여이 작업을 관리 할 수 ​​있습니다 페이지가 완전히로드 된 후, 오버레이를 제거 ... javascripting와 마지막 요소 뒤에 오버레이를 제거하는 콜백 함수의 어떤 종류를해야 물론이 http://jsfiddle.net/6Ldyd/

같은

뭔가를 (을 페이드 아웃) 페이지가로드됩니다 (또는 마지막 요소가로드 된 후 호출하기위한 스크립트)

+0

이 모든 요소를 ​​미리로드해야하므로 느려질 수 있습니다. 아약스를 통해 바디를로드하는 것이 확실한 선택입니다. – gopi1410

+0

css 파일을 페이지 상단 (html 파일)에 배치하고 페이지 하단의 스크립트를 배치하면 브라우저가 응답 데이터의 첫 번째 KB를 받자 마자 오버레이 div가 렌더링됩니다. 따라서 사용자는 오버레이에서 로더를보고 나머지 스크립트/HTML이로드 될 때까지 기다립니다. – drinchev

관련 문제