[j쿼리] 로드 , 레디

카테고리 없음

by esoesmio 2023. 5. 25. 19:57

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <style>

    </style>
</head>
<body>
<div class="container">
    <img src="https://ssl.pstatic.net/melona/libs/1446/1446894/640ec760878880588b64_20230524165524802.jpg" alt="">
    
    
</div>
</body>

<script>
    //dom객체 ( 바디안에 태그들) 이 항 상 먼제 불러와진 후에 링크로 연결된 파일들을 불러온다. 하지만 이미지같은 정적파일들은 브라우저에서 일정기간동안 캐시메모리에 저장하고 있기 때문에 두번쨰 접속부터는 캐시메모리에서 이미지를 꺼내오기 때문에 이미지가 더 빨리 로드된다. 브라우저의 캐시메모리를 삭제하고 다시 진행해보면 항상 돔객체의 로드(ready method)가 먼저 완료되는 것을 확인할 수 있다.


    $("img").on("load", () => {
        const htmlStr = `
                <p style="color: red;">로딩완료</p>
            `;

        $(".container").append(htmlStr);
    });

    $(document).ready(() => {
        const htmlStr = `
                <p style="color: blue;">레디완료</p>
            `;

        $(".container").append(htmlStr);
    });
</script>
</html>

이렇게 할 필요도없이

$(()=>{
alert("document");
});

이렇게하면 로드되자마자 바로됨