1. 페이지로드 후 실행되는 JavaScript
https://code.i-harness.com/ko/q/c53c6
다음은 페이지가로드 된 후 지연된 js 로딩을 기반으로하는 스크립트입니다.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
2. Javascript&CSS〃웹사이트 로딩중 이미지 띄우기
http://hunit.tistory.com/309
이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다.
■ 로딩 이미지 만들기
여러가지 로딩 이미지를 제공합니다.
■ 로딩 소스
위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다.
<style>
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center; }
#loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100; }
</style>
다음은 SCRIPT 소스
<script type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
마지막으로 HTML or JSP <BODY></BODY>안에 들어가는 소스
<div id="loading"><img id="loading-image" src="/images/loading.gif" alt="Loading..." /></div>
3. 기본적인 웹 사이트 최적화 방법 (1) – HTTP 요청 최소화
http://wikibook.co.kr/article/web-sites-optimization-1/
HTTP 요청 최소화
HTTP 요청 최소화는 최적화에서 가장 기본이면서도 중요한 부분이다. 웹 사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성된다. 각 구성 요소는 모두 웹 서버에 있다. 이 구성 요소를 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 든다. 네트워크 비용은 곧 응답 시간으로 이어진다. 그러므로 다운로드해야 하는 구성 요소의 개수를 줄이는 것은 가장 효과가 크고 중요한 최적화 방법이다. 웹 페이지에서 다운로드하는 구성 요소의 개수는 HttpWatch나 YSlow1로 알아볼 수 있다.
다음은 YSlow로 네이버me(http://me.naver.com) 서비스 페이지를 분석한 결과다. 왼쪽 분석 결과는 캐시가 없는 상태일 때를 분석한 결과고, 오른쪽 분석 결과는 캐시가 있는 상태일 때를 분석한 결과다. YSlow를 이용하면 이처럼 웹 페이지의 구성 요소의 개수와 크기를 쉽게 알 수 있다.
댓글 ( 5)
댓글 남기기