728x90
728x90
onload 이벤트를 사용할 수 있는 태그들
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
jQuery Onload 문법
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
$(window).on('load',function(){
$('#d-block').hide();
$('#d-none').show();
// $().toggle();
});
// 다른 예 사진을 로드한 뒤에 여러개의 사진에 작업 가능
$( "img.userIcon" ).load(function() {
if ( $( this ).height() > 100) {
$( this ).addClass( "bigImg" );
}
});
실습하기
자바스크립트 : onload 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<!-- onload : 페이지 새로고침 -->
<body onload="myFunction()">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
const dblock = document.getElementById('d-block');
const dnone = document.getElementById('d-none');
function myFunction(){
alert("page is loaded");
hide(dblock);
show(dnone);
}
let show = function (elem) {
elem.style.display = 'block';
};
// Hide an element
let hide = function (elem) {
elem.style.display = 'none';
};
// Toggle element display
let toggle = function (elem) {
// If the element is visible, hide it
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}
// Otherwise, show it
show(elem);
};
</script>
<body onload="myFunction()">
<h1 id="d-block">디스플레이 블록</h1>
<h1 id="d-none" style="display: none">디스플레이 none</h1>
<script>
function myFunction() {
//alert("Page is loaded");
document.getElementById('d-block').style.display = 'none';
document.getElementById('d-none').style.display = 'block';
}
</script>
</body>
</html>
제이쿼리 onload 이벤트 : 클래스를 활용해서 사용한 예는 자바스크립트보다 더 빠르다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>부트스트랩 복습</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.content{
display: none;
}
.content.is-visible{
display: block;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$(window).on('load',function(){
alert("!!");
$('h1:first').removeClass('is-visible');
$('h1:last').addClass('is-visible');
// $().toggle();
});
</script>
<h1 class="content is-visible">디스플레이 블록</h1>
<h1 class="content">디스플레이 none</h1>
</body>
</html>
728x90
728x90
'Frameworks > Bootstrap' 카테고리의 다른 글
부트스트랩 (13) 카드 (프로필 꾸미기) (0) | 2019.07.10 |
---|---|
부트스트랩 (12) Collapse 메소드 (0) | 2019.07.10 |
부트스트랩 (10) hidden, block, display:none 비교 (0) | 2019.07.10 |
부트스트랩 (9) 폰트어썸을 이용한 소스 활용 (아이콘) + viewport 예제 (0) | 2019.07.10 |
부트스트랩 (8) 간단한 메인페이지 실습 (0) | 2019.07.05 |