CSS + 이미지 + 스크립트가있는 페이지를로드 중입니다. 그래서 페이지로드시 런타임에 페이지에로드 된 총 리소스의 수를 모두 계산하려면 해당 계산과로드 시간을 기준으로 진행률 표시 줄을 표시 할 수 있도록하십시오.페이지에로드 된 모든 리소스 계산하기
내 질문에 얼마나 많은 리소스가 이미지 + 스크립트 + CSS 파일을 포함하여 DOM에 실제로로드되는지 계산하는 것입니다. 그리고이를 바탕으로 진행 바 진행 패턴을 계산하고 진행시켜야합니다.
누군가가 그 방법을 밝힐 수 있습니까?
총 수는 다음과 같습니다이 요청한 자원의 총 수를 반환합니다
$('script, link[type=text/css], img').size();
.
'length'은 함수가 아니며'.length;'또는'.size(); '를 사용하십시오 –
당신은 맞습니다 @Pedro L. 나는 그것의 업데이트를 업데이트했습니다. –
나는 페이지가 그것이 아마 너무 큽니다 후 진행 표시 줄을 필요로 너무 큰 경우 문제의 주위 길을 잘못 ...
에 접근하고 생각합니다.
렌더링을 신속하게 시작하고 이후에 다른 항목이 추가되도록 페이지를 최적화하지 않는 이유는 무엇입니까? 예 : 점진적으로 또는 게으른로드.
아니요 페이지가 그리 크지는 않습니다. 하지만 문제는 실제로 devundef의 의견에서 언급 한 것입니다. 읽어주세요. 나는 그가 내 쿼리 영역을 완벽하게 이해했다고 생각합니다 :) – Joy
이것을 수행하는 데 직접적인 방법은 없습니다. 스크립트 및 이미지 태그에는 load 이벤트가 있으므로 콜백을 첨부하고로드 된 시점을 알 수 있습니다. CSS에는 쿼리 할 속성이나 이벤트가 없지만 img 태그를 사용하여 문제를 해결할 수 있습니다. 이미로드 된 스크립트 태그에 콜백을 연결하면 img 태그와 마찬가지로 해당 콜백이 실행되지 않으므로 간단하지 않습니다. 진행률 표시 줄에서 문서의 모든 img/script/css를 추적하기 시작하면 이미로드 된 img/script/css를 확인한 다음 아직로드되지 않은 다른 사용자에 대한 이벤트 콜백을 첨부해야합니다. Img 태그에는 complete 속성이 있지만 스크립트는 그렇지 않으므로 단순히 DOM을 쿼리하여 스크립트가로드되었는지 여부를 알 수 없습니다. CSS는 더 트릭입니다.
글쎄, 당신은이 간단한 작업이 아닙니다 볼 수 있듯이 실제로는 복잡하고 개인적으로 나는 그냥 표시 진행 표시 줄에 시간과 노력을 지출 가치가 있다고 생각하지 않습니다.
페이지에서 오래되고 좋은 스핀을 표시하고 행복하게 보내십시오 :)
예, 당신이 정말로 옳았습니다. 그러나 우리 사이트에 트윈을 실행하는 실버 라이트 애플리케이션이 있습니다. 그래서 우리는 Mvc 플랫폼으로 같은 jus를 구현하기로되어 있습니다. 그래서 내가 어떻게 진행 할지를 둘러 보려고 했었습니다. 내 쿼리에 대한 이해는 완벽합니다. 어떤 더 쉬운 방법이 있습니까? – Joy
@ 죠이, 제가 아는 더 쉬운 해결책은 없습니다. 스크립트 및 이미지에 대한 이벤트를 첨부 및로드하고 덜 정확한 진행률 표시 줄을 표시 할 수 있습니다. 내가 너에게 할 수있는 말은 내가 전에 이것을 시도했는데 그 일이 잘되지 않았다는 것이다. 예를 들어, 진행 막대를 표시하면 모든 자원이로드 된 후에 그것을 숨겨야합니다. 맞습니까? 이미지가로드되지 않거나 스크립트가로드되지 않으면 어떻게됩니까? – devundef
스크립트에서 마커를 사용하여 표시 할 수 있습니다.예를 들어, 스크립트가 호출하여 "loaded ("xyz ")"를로드하면 진행 상황에 대한 일부 정보를 표시 할 수 있습니다. 하지만 이미지와 CSS에 대한 믿을만한 방법은 없습니다. – devundef
브라우저에 이미 진행률 표시기가 제공되지 않습니까? 나는 그것이 브라우저가있는 것이라고 생각했다. –