또리밍밍
653
2018-12-11 15:05:05
4
432

ajax 통신하면서 새로고침시 canvas 이미지 깜박임 처리 어떻게 없애나요?


처음에 load되고나서 주기적으로 refresh() 해주는데, 

refresh 에서 load될때마다 이미지가 깜박이는 현상을 어떻게 없앨수있나요..?

<script id="image-template" type="text/x-handlebars-template">
		{{#resultList}}
			{{#switch status}}
				{{#case "DISCONNECT"}}<img id="canvas" src="{{@root.context}}img/stop.png" class="fadeImage"/>{{/case}}
				{{#case "CONNECT"}}<img id="canvas" src="{{@root.context}}img/running.png" class="fadeImage"/>{{/case}}
				{{#default}}-{{/default}}
			{{/switch}}
		{{/resultList}}
</script>

<script th:inline="javascript">
var today = kendo.toString(new Date(), "yyyy-MM-dd","ko-KR") ;
var refresh_interval = 5000;
const timer = 0;
$(function(){
	var timer;
	var select = $("select#resetTimeSelect");
	select.siblings("label").text(select.children("option:selected").text()); //새로고침 시간 선택
    select.change(function(){
        var select_name = $(this).children("option:selected").text();
        $(this).siblings("label").text(select_name);
        
        window.refresh_interval = $(this).children("option:selected").val();
        
        refresh();
    });
	
 
	window.onbeforeunload = function() {
		clearInterval(window.timer);
	}
	
	var ajaxRunning = false;
	
	load();

function load() {

	if(!ajaxRunning){
		ajaxRunning = true;
			$.ajax({
				url : "/List.json",
				type : "get",
				data : {
					"searchVal" : $("#searchVal").val()
				},
				dataType : "json",
				cache : false,
				contentType : "text/json; charset=UTF-8",
				success : function(data) {
					
					var source = $("#image-template").html();
					var template = Handlebars.compile(source);
					var itemList = template(data);
					$('#img_place').html(itemList);
					
					$("#refreshTime").text(moment().format('YYYY-MM-DD HH:mm:ss'));
					ajaxRunning = false;
					refresh();
				},
				complete : function() {
					ajaxRunning = false;

				},
				error : function(xhr, status, err){
					alert(FailMessage);
				}
			});
	}
		
}	
</script>
<body>
		<div class="panel_04" th:fragment="errorServiceElement">
				<div class="tit2" id="img_place"></div>
		</div>
</body>
	


0
0
  • 답변 4

  • kiroki
    215
    2018-12-11 15:40:14

    refresh 함수가 어떻게 생겼는지 보면 더 자세히 알 수 있을 것 같은데요

    추측으로는 이미지를 교체하시는 방법을 사용하시지 마시고

    src attribute의 주소를 바꾸는 방법으로 해보세요

    0
  • 또리밍밍
    653
    2018-12-11 15:44:52

    refresh의 함수는 아래와 같아요

    function refresh(){

    var today = kendo.toString(new Date(), "yyyy-MM-dd","ko-KR") ;

    clearInterval(window.timer);

    if(window.refresh_interval != "stop"){

    window.timer = setInterval(function(){

    load();

    }, window.refresh_interval);

    }

    }


    0
  • kiroki
    215
    2018-12-11 15:53:17
    var source = $("#image-template").html();
    var template = Handlebars.compile(source);
    var itemList = template(data);
    $('#img_place').html(itemList);

    여기 보시면 img_place의 html을 변경하고 계신데요

    이렇게 하면 깜빡임이 일어나는게 당연한거구요


    var itemList = template(data);
    $('#img_place').html(itemList);

    여기를 변경해야 할 것 같은데 $('#img_place').html(itempList); 를 사용해서 통째로 바꾸시지 마시고

    data로 넘어온 값들을 이용해서 이미 생성되어 있는 element의 text 및 attribute를 변경하세요

    그러면 안깜빡 거립니다

    1
  • 또리밍밍
    653
    2018-12-19 15:47:52

    이미지는 style부분에 class로 두어 깜빡임 현상을 해결했습니다. 감사합니다~

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.