본문 바로가기

프로그래밍

react native webview의 로딩속도가 느릴경우.

반응형

react native의 webview는 이미지가 다 로딩이 되어야 렌더링이 된다.

그렇기 때문에 

lazy 로딩등 이미지 순차로딩을 사용할 경우 빠르게 로딩이 가능하다.

jquery 아래에 아래 스크립트를 삽입한다.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

 

이미지 태그를 아래와 같이 다 변경한다.

 <img class="lazy" data-src="path/to/image.jpg" />

 

페이지의 가장 하단에 아래 스크립트를 삽입한다.

<script>
	$(function() {
        $('.lazy').Lazy();
    });
</script>    

 

이렇게 하면 네이티브 앱과 속도차이가 거의 없는 웹뷰를 제작할 수 있다. 

반응형