javascript - window.location.href를 사용하여 페이지로 이동할 때 새 페이지가 완전히 로드되기 전에 로딩 효과를 얻는 방법은 무엇입니까?

Question

페이지 점프에 window.location.href를 사용하면 새 페이지가 완전히 로드되기 전에 로딩 효과를 얻는 방법은 무엇입니까?

Answer 1

저라면 이렇게 할 것입니다:
1. window.location.href가 점프하는 페이지에 로딩 효과를 추가할 수 있습니다.
2.window.location.href 점프 페이지의 내용을 수정할 수 있는 방법이 없으면 ajax를 사용하여 페이지를 요청하고, 현재 페이지에 html을 삽입한 후, 페이지 요청 시 로드하겠습니다.

Answer 2

location.href 점프로 인해 페이지가 완전히 새로 고쳐지며 이는 이전 페이지와 아무 관련이 없습니다.

페이지는 위에서 아래로 파싱됩니다. 로딩이 맨 위에 있으면 자연스럽게 먼저 로드됩니다. 그러나 이미지를 사용할 경우 이미지가 비동기적으로 다운로드되므로 순서를 제어할 수 없으며 이미지가 지나갈 수 있습니다. 순식간에.

꼭 보아야 한다면 사진이 아닌 로딩을 사용하고 다른 콘텐츠를 먼저 숨기고 로딩만 나타난 다음 로딩이 완전히 시작된 후에 표시할 수 있습니다.

Answer 3

window.location.href를 사용하여 페이지 점프를 완료하세요. 이는 순간적이므로 점프 페이지(A)에서 로딩을 수행하는 것은 신뢰할 수 없습니다. window.location.href去完成页面的跳转，这是瞬发的，所以在跳转页(A)做loading是不靠谱的。

那么loading效果是应该放到被跳转页(B)来做。但是img标签src属性是异步的，如果不是用js去控制的话，那么这时你也无法保证img加载的时间，这个时候可以试着用直接写进模板文件当中的css的loading效果来做，等页面加载完了之后关掉css的loading

그런 다음 리디렉션할 페이지(B)에 로드 효과를 배치해야 합니다. 그러나 img 태그의 src 속성은 비동기식입니다. js에 의해 제어되지 않으면 img가 보장되지 않습니다. 로딩 시간, 이때 템플릿 파일에 직접 작성된 css의 로딩 효과를 사용해보고 페이지 이후에는 를 끌 수 있습니다. CSS의 로드 효과가 로드됩니다. 🎜

Answer 4

이에 대한 호환성 요구 사항이 있나요? 점프에 로딩 레이어를 추가하고 js로 제어할 수도 있습니다
예제를 작성했습니다:
https://www.mnzld.net/demo/lo...