Facetwp Loading 이미지 처리

Facetwp 를 이용하다 보면 회전하는 로딩 이미지가 필터 영역인 Facet 에서만 적용될수 있습니다.

로딩 이미지를 원하는 위치에서 동작 하기 위해서 아래 코드를 참고 하시기 바랍니다.

사용하시는 테마 및 Facet wp 삽입 영역에 따라 달라질수 있으니 이부분은 사용자 분이 해당 페이지에 맞게 조정이 필요합니다.

add_action( 'wp_head', function() { ?>
    <style>
        .facetwp-facet .facetwp-icon.f-loading {
            display: none;
        }
		.custom-loader {
			position: absolute;
			background-position: center;
			background-repeat: no-repeat;
			width: 100%;
            height: 100%;
		}
		
		.custom-loader .f-loading {
	        z-index: 100;
            top: 40%;
            height: 100px;
		}
		
		.custom-loader .dimmed {
		    position: absolute;
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0%;
            z-index: 99;
            -moz-opacity: 0.8;
            opacity: 10%;
            filter: alpha(opacity=60);
            background: #666666;
		}
    </style>
<?php });

add_action( 'wp_head', function() {
	?>
	<script>
	(function($) {
		$(document).on('facetwp-refresh', function() {
			if (FWP.loaded) {
				$('.entry-content.single-content').prepend(
				    '<div class="custom-loader facetwp-loading"><div class="facetwp-icon f-loading"></div><div class="dimmed"></div></div>'
				);
				$('.custom-loader').height( $('.entry-content.single-content').height() ).width( $('#facet-container').width() );
			}
		});
	
		$(document).on('facetwp-loaded', function() {
		    console.log('End Load')
			$('.custom-loader').remove();
		});
	})(jQuery);  
	</script>
	<?php
},100);