이 기능은 AMPHTML 광고에 사용할 수 없습니다.
특히 광고가 상당히 큰 경우에는 광고의 나머지 부분이 로드되는 동안 이미지를 표시하는 것이 유용할 때가 많습니다.
1. 로딩 이미지 설정
ID가 loading인 div를 HTML에 추가합니다.
<body style="visibility: hidden;">
<div id="loading" class="loading-image">
로드 중...
</div>
<gwd-google-ad id="gwd-ad" polite-load="">
...
</gwd-google-ad>
</body>2. 로딩 이미지 표시 중지
handleAdInitialized 함수에 코드를 추가하여 로딩 이미지를 숨기거나 삭제할 수 있습니다. 이는 광고가 초기화된 후에 호출됩니다. 폴라이트 로드를 사용 설정하면 PAGE_LOADED(인에블러) 이벤트가 전달되었을 때 이 메소드가 호출됩니다.
로딩 이미지 숨기기
아래의 강조표시된 코드는 로딩 이미지를 숨깁니다.
/**
* 광고 초기화 후에 그리고 광고의 기본 페이지가 표시되기 전에
* 전달된 이벤트를 처리합니다.
*/
function handleAdInitialized(event) {
// 광고의 폴라이트 로드 단계가 종료되는 지점을 표시합니다. 로딩 이미지가
// 사용자에게 표시된 경우에는 이 지점에서 삭제하는 것이
// 좋습니다.
document.getElementById('loading').style.display = 'none';
}로딩 이미지 삭제
아래의 강조표시된 코드는 로드 이미지를 삭제합니다.
/**
* 광고 초기화 후에 그리고 광고의 기본 페이지가 표시되기 전에
* 전달된 이벤트를 처리합니다.
*/
function handleAdInitialized(event) {
// 광고의 폴라이트 로드 단계가 종료되는 지점을 표시합니다. 로딩 이미지가
// 사용자에게 표시된 경우에는 이 지점에서 삭제하는 것이
// 좋습니다.
document.body.removeChild(document.getElementById('loading'));
}