테스트 사이트 - 개발 중인 베타 버전입니다

js 소스 구성 고민입니다. 채택완료

삼락 1년 전 조회 1,930

안녕하십니까! 선배님들~

스크립트 구성 해보다가 문의 드립니다.

 

<div id=rac-scroll-pop class="popup">
    <div class="popup-banner">
        <span class="popup-close">×</span>
 <!--@import(/smart-banner/shop1/smart-banner-admin-PC00037.html)-->
    </div>
</div>

위와 같이 스크롤 시 특정 부분에서 나타나는 팝업 요소가 있습니다.

 

위 소스중에서

<!--@import(/smart-banner/shop1/smart-banner-admin-PC00037.html)--> 이 임포트 문서는 앱에서 배너를 등록하면 자동으로 반영되는 구조인데요. 대부분 이미지 배너가 등록됩니다.

 

보통 이벤트 배너를 등록하는데요.

이벤트가 없을 시 이미지 파일이 없으면 div 자제가 안뜨게 하고 싶은데요.

구글링 해서 아래 같이 조합해봤는데 안되네요.

 

<script>
if (document.getElementById("rac-scroll-pop") !== null) {
 $(function() {
$("#rac-scroll-pop").css({
"display":"block"
});
};
} else {
 $(function() {
$("#rac-scroll-pop").css({
"display":"none"
});
};
}
 </script>

 

제 생각에는 id 안에 img 파일이 있는지 확인해서 있다면 div를 보이고, 없다면 숨기면 될 것 같은데요.

선배님들의 조언 부탁드립니다.

 

 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
1년 전

<script>

if ($("#rac-scroll-pop img").length == 0) 

  $("#rac-scroll-pop").hide();

</script>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

삼락
1년 전
마르스컴퍼니 님.
너무 정확하게 적용됩니다.
정말 감사합니다.
행복한 날들 되십시오.
꾸벅~
마르스컴퍼니
1년 전
생성형 AI의 도움을 받았습니다.

* https://chat.openai.com
* https://gemini.google.com
* https://clova-x.naver.com

댓글을 작성하려면 로그인이 필요합니다.

스크립트 단에서 해도 이미지가 없을경우 404 에러가 지저분하게 남을것 같습니다.

저라면 html 임포트단 내부에서 처리할것 같네요.

임포트 전 부모 단에서는 fixed 할 위치만 잡고 너비나 높이는 auto 로 두고

디자인이나 크기 등등은 임포트 단에서 처리하도록요.

 

아니면 페이지 로드 후 특정 이미지가 없다면 hidden 처리하는 스크립트가 있는데

로드되기 전에 디자인이 보여질수도 있습니다.

 

그냥 임포트 html 문서에서 처리하시는게 좋을것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

삼락
1년 전
애드프로.
귀한 시간 답변 주셔서 감사합니다.
위에 정확하게 알려주신 분이 계셔서 잘 해결했습니다.
알려주신 방법도 참고해서 공부하겠습니다.
감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

1년 전

해당 img tag 안에 onerror 를 사용해서

 

<img src="ex.jpg" onerror="document.getElementById('rac-scroll-pop').style.display='none'">

처럼 하시면 되지 않을까요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

삼락
1년 전
행복동 님.
귀하고 바쁜시간 내주셔서 감사드립니다.
알려주신 소스는 공부에 참고하겠습니다.
행복한 날들 되십시오.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인