Blog

function waitForImageLoad(imgSelector) {
    return new Promise((resolve) => {
        const images = document.querySelectorAll(imgSelector);
        let loadedCount = 0;

        function checkAllLoaded() {
            loadedCount++;
            if (loadedCount === images.length) {
                resolve(images);
            }
        }

        images.forEach(img => {
            if (img.complete) {
                checkAllLoaded();
            } else {
                img.onload = checkAllLoaded;
                img.onerror = checkAllLoaded;
            }

            if (!img.src && img.dataset.src) {
                img.src = img.dataset.src;
            }
        });

        if (images.length === 0) {
            resolve([]);
        }
    });
}

function initFjPAd() {
    try {
        let FJP_API_KEY = '30d8fa9f1e18238f968bf00acb47df7e';
        let FJP_WritingTime = '2024-08-19 13:40:48';
        let FJP_imgSelector = '.article-body img';
        let FJP_NewsUID = '';
        let FJP_CITYPE = 'hn';
        let FJP_pageid = '0HP3';
        let FJP_campaignid = '0R5y';
        let FJP_USE_YN = true;

        waitForImageLoad(FJP_imgSelector).then(images => {
            if (images.length > 0) {
                let fjP = new FjP();
                fjP.fetchAd(FJP_API_KEY, images, FJP_WritingTime, FJP_NewsUID, FJP_USE_YN, FJP_CITYPE, FJP_pageid, FJP_campaignid);
            } else {
                console.log('No images found to process');
            }
        });
    } catch (error) {
        if (error.message.includes('FjP')) {
            console.error('FjP 인스턴스 생성 오류: ', error);
        } else {
            console.error('FjP 광고 실행 오류: ', error);
        }
    }
}

function initWithDelay() {
    setTimeout(initFjPAd, 100);  
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initWithDelay);
} else {
    initWithDelay();
}

이 코드는 웹 페이지에서 이미지를 로드하고 광고를 삽입하는 기능을 구현한 JavaScript 코드입니다. 주요 기능을 설명하겠습니다:

1. `waitForImageLoad` 함수:
– 주어진 선택자(`imgSelector`)에 해당하는 모든 이미지가 로드될 때까지 기다립니다.
– Promise를 반환하며, 모든 이미지가 로드되면 해결(resolve)됩니다.
– 이미지가 이미 로드되었거나 로드에 실패한 경우도 처리합니다.
– `data-src` 속성이 있는 이미지의 경우, `src`로 설정하여 로딩을 시작합니다.

2. `initFjPAd` 함수:
– FjP 광고 시스템을 초기화하고 실행합니다.
– 여러 설정 변수(API 키, 작성 시간, 이미지 선택자 등)를 정의합니다.
– `waitForImageLoad`를 호출하여 이미지 로딩을 기다린 후 광고를 가져옵니다.
– 오류 발생 시 콘솔에 로그를 출력합니다.

3. `initWithDelay` 함수:
– `initFjPAd` 함수를 100ms 지연 후 실행합니다.

4. 초기화 로직:
– 문서가 아직 로딩 중이면 `DOMContentLoaded` 이벤트에 `initWithDelay`를 연결합니다.
– 문서가 이미 로드되었다면 바로 `initWithDelay`를 실행합니다.

이 코드는 페이지의 이미지 로딩을 기다린 후 광고 시스템을 초기화하여, 이미지 기반 광고를 효과적으로 삽입할 수 있도록 설계되었습니다.