페이지 로딩 속도 개선 - 이미지 로딩처리

페이지 로딩속도 개선 방안

 

페이지내에 사이트내 또는 외부 이미지 링크가 많은 경우 페이지 로딩이 전체적으로 느려지게 된다.

이때 html 페이지를 먼저 보여준 후 이미지 태그를 나중에 처리하는 방법으로 로딩 속도를 향상시킬 수 있다.

 

테스트 결과 인터넷속도가 느린 경우와 크롬에서 전반적인 속도 향상을 체감할수있었다.

<%
   for i = 0 to 100
%>
<img src="로딩이미지경로" orgImg="실제이미지경로" id="hImg_<%=hImgCnt%>"/>
<%
   next
%>
<script type="text/javascript">
<!--
     $(document).ready(function()
     {
          var iCnt = <%=hImgCnt%>;
          for (i=1; i <= iCnt ; i++ )
          {
                   $("#hImg_"+i).attr("src", $("#hImg_"+i).attr('orgImg'));
          }
     });

//-->
</script>