Translate

2014년 8월 24일 일요일

[Android] Android 2.x 의 OEM(기본) Browser 에서 이미지변경이 렌더링 되지 않는경우





문제
Android 2.x 에서 이미지를 교체(변경) 했을 시 처음에는 렌더링이 되지 않고 있다가
스크롤을 내린다거나 해야만 변경된 이미지로 정상적으로 렌더링이 된다.



예제 소스를 만들어 봤는데 예제소스에서는 렌더링이 안되는 증상 재현이 힘들다.
(만들던 프로그램은 DOM 구조도 복잡하고 Event 가 여러 Element 에 사용되고
Event Bubble 까지 처리하기 때문에 그렇게 복잡한 예제를 만들기가 귀찮다;;)

아래의 소스를 Android 2.x 에서 돌릴 시 정상적으로 잘 된다.
해결 방법만 확인해 보면 될것 같다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <script src="http://code.jquery.com/jquery-2.1.1.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.post').bind('touchend', function(post) {
                changeImage($(post).children('.wrapperImg').children('img'));
            });
        });
        function changeImage(image) {
            var selectedImage = $(image).children('.wrapperImg').children('img');
            if (selectedImage.attr('src').indexOf('normal') > -1) {
                selectedImage.attr('src', 'select.png');
            } else {
                selectedImage.attr('src', 'normal.png');
            }
            // Android 2.x 의 경우 화면이 바뀌거나 DOM 구조가 변경되어야 변경된 이미지가 렌더링된다.
            if (navigator.userAgent.match(/Android 2/)) {
                $('body').append('<div style="display:none;"></div>');
            }
        }
    </script>
    <style type="text/css">
        #wrapperDiv {
            margin: 0;
            padding: 5px;
            border: 1px solid blue;
        }
        .post {
            width: 100%;
            height: 25px;
        }
        .title {
            margin-left: 30px;
        }
        .wrapperImg {
            float: left;
            right: 15px;
        }
        .checkBtn {
            width: 20px;
            height: 20px;
        }
        .division {
            width: 100%;
            height: 1px;
            background-color: #999999;
        }
    </style>
</head>
<body>

<div id="wrapperDiv">
    <div class="post" ontouchend="changeImage(this);">
        <div class="wrapperImg"><img src="normal.png" class="checkBtn"/></div>
        <div class="title">게시물1</div>
    </div>
    <div class="division"></div>
    <div class="post" ontouchend="changeImage(this);">
        <div class="wrapperImg"><img src="normal.png" class="checkBtn"/></div>
        <div class="title">게시물2</div>
    </div>
    <div class="division"></div>
    <div class="post" ontouchend="changeImage(this);">
        <div class="wrapperImg"><img src="normal.png" class="checkBtn"/></div>
        <div class="title">게시물3</div>
    </div>
    <div class="division"></div>
    <div class="post" ontouchend="changeImage(this);">
        <div class="wrapperImg"><img src="normal.png" class="checkBtn"/></div>
        <div class="title">게시물4</div>
    </div>
    <div class="division"></div>
    <div class="post" ontouchend="changeImage(this);">
        <div class="wrapperImg"><img src="normal.png" class="checkBtn"/></div>
        <div class="title">게시물5</div>
    </div>
    <div class="division"></div>
    <div class="post" ontouchend="changeImage(this);">
        <div class="wrapperImg"><img src="normal.png" class="checkBtn"/></div>
        <div class="title">게시물6</div>
    </div>
</div>

</body>
</html>






댓글 없음 :

댓글 쓰기