: [oopy] 메인 페이지 상단 이미지 랜덤 출력
•
노션 상단 이미지 랜덤 출력하기
◦
픽셀 1500 x 1000
◦
그레이톤의 이미지만!!
•
근데… 언제 다른 이미지로 바뀌지?? ← 해결 (아래 코드 삽입)
•
메인 페이지 HTML 코드 추가
<style>
.page_cover {
visibility: hidden; /* 초기에는 커버 이미지를 숨김 */
}
</style>
<script>
// 커버 이미지 선택
var target = document.querySelector(".page_cover");
// 랜덤한 숫자를 생성하여 캐시 방지
var randomImageUrl = "https://picsum.photos/1500/1000?grayscale&random=" + Math.floor(Math.random() * 10000);
// 커버 이미지 src 속성을 랜덤 이미지로 변경하고, 이미지가 로드되면 표시
if (target) {
target.setAttribute("src", randomImageUrl);
// 이미지가 완전히 로드된 후 visibility를 visible로 변경
target.onload = function() {
target.style.visibility = "visible";
};
}
</script>
HTML
복사