문제
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>
댓글
댓글 쓰기