부트스트랩 (11) onload 이벤트

Frameworks/Bootstrap 2019. 7. 10. 10:21
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) 카드 (프로필 꾸미기)  (2) 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
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,
250x250
250x250
English Korean
04-26 05:43

티스토리툴바

v