js 소스 구성 고민입니다.
본문
안녕하십니까! 선배님들~
스크립트 구성 해보다가 문의 드립니다.
<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
<script>
if ($("#rac-scroll-pop img").length == 0)
$("#rac-scroll-pop").hide();
</script>
마르스컴퍼니 님.
너무 정확하게 적용됩니다.
정말 감사합니다.
행복한 날들 되십시오.
꾸벅~
생성형 AI의 도움을 받았습니다.
* https://chat.openai.com
* https://gemini.google.com
* https://clova-x.naver.com
해당 img tag 안에 onerror 를 사용해서
<img src="ex.jpg" onerror="document.getElementById('rac-scroll-pop').style.display='none'">
처럼 하시면 되지 않을까요?
행복동 님.
귀하고 바쁜시간 내주셔서 감사드립니다.
알려주신 소스는 공부에 참고하겠습니다.
행복한 날들 되십시오.
스크립트 단에서 해도 이미지가 없을경우 404 에러가 지저분하게 남을것 같습니다.
저라면 html 임포트단 내부에서 처리할것 같네요.
임포트 전 부모 단에서는 fixed 할 위치만 잡고 너비나 높이는 auto 로 두고
디자인이나 크기 등등은 임포트 단에서 처리하도록요.
아니면 페이지 로드 후 특정 이미지가 없다면 hidden 처리하는 스크립트가 있는데
로드되기 전에 디자인이 보여질수도 있습니다.
그냥 임포트 html 문서에서 처리하시는게 좋을것 같습니다.
애드프로.
귀한 시간 답변 주셔서 감사합니다.
위에 정확하게 알려주신 분이 계셔서 잘 해결했습니다.
알려주신 방법도 참고해서 공부하겠습니다.
감사합니다.