JavaScript의 이미지 온로드 이벤트
이 기사에서는 JavaScript에서 .onload 이벤트를 처리하는 방법에 대해 설명합니다. 이미지가 업로드되었을 때 JavaScript를 사용하여 경고 상자를 만드는 방법에 대해 알아봅니다.
또한 경고 상자를 생성하여 JavaScript를 사용하여 이미지가 로드되었는지 여부를 확인하는 방법도 알아봅니다.
JavaScript의 .onload 이벤트
.onload 이벤트는 개체가 로드된 경우에만 발생합니다. .onload 이벤트는 웹 페이지가 이미지, 스크립트, CSS 파일 등 모든 콘텐츠를 로드한 후 스크립트를 실행하기 위해 요소 본문 내에서 주로 사용됩니다.
사용된 브라우저를 통해 이미지, 스크립트, iframe 등과 같은 외부 리소스의 로드를 추적할 수 있습니다. 이미지를 업로드하고 브라우저 캐시에 저장되면 onload 이벤트가 발생합니다.
이미지가 캐시되었는지 여부에 관계없이 이미지가 로드될 때 표시되는 경고 상자를 어떻게 만들 수 있습니까?
onload 이벤트가 이미지에서 실행될 때 이미지가 성공적으로 로드되었습니다라는 메시지를 표시하는 경고 상자를 만들어야 합니다. JavaScript와 HTML을 사용하여 이 문제를 해결할 수 있습니다.
JavaScript의 image.onload 이벤트
JavaScript를 사용하여 이미지가 완전히 로드되었는지 여부를 확인할 수 있습니다. HTMLimageElement 인터페이스의 complete 속성을 사용합니다.
이 속성은 이미지가 완전히 업로드되면 true를 반환하고 그렇지 않으면 false를 반환합니다. JavaScript에는 naturalWidth 및 naturalHeight 속성이 있으며 둘 중 하나를 사용할 수 있습니다.
예제 코드에서 .naturalWidth를 사용했는데 이미지가 성공적으로 로드되면 true를 반환하고 그렇지 않으면 0을 반환합니다.
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using Javascript</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using Javascript</h1>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar">
</body>
</html>
자바스크립트 코드:
window.addEventListener('load', event => {
var image = document.querySelector('img');
var isLoadedSuccessfully = image.complete && image.naturalWidth !== 0;
alert(isLoadedSuccessfully);
});
이 코드를 실행하면 true가 반환되며 이는 이미지가 성공적으로 로드되었음을 의미합니다.
여기를 클릭하면 위 예제 코드의 라이브 데모를 볼 수 있습니다.
HTML의 image.onload 이벤트
JavaScript를 사용하고 싶지 않은 경우 HTML 속성을 사용하여 이미지가 로드되었는지 여부를 확인할 수 있습니다. HTML에서는 onload 및 onerror 속성을 사용할 수 있습니다.
HTML에서 onload 속성은 이미지가 성공적으로 로드되면 실행되는 반면 onerror 속성은 이미지를 로드하는 동안 오류가 발생하면 실행됩니다.
다음 코드에서는 onload 및 onerror 속성을 사용했습니다. 따라서 이러한 속성의 도움으로 이미지가 로드될 때 이미지가 성공적으로 로드되었습니다라는 메시지를 표시하는 경고 상자를 만들 수 있습니다.
이미지를 불러오는 중 오류가 발생하면 이미지가 로드되지 않았습니다.라는 메시지가 표시됩니다.
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using HTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using HTML </h1>
<p id="currentTime"></p>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar"
onload="javascript: alert('The image is loaded successfully')"
onerror="javascript: alert('Image is not loaded')" />
</body>
</html>
코드를 실행하면 이미지가 성공적으로 로드되었습니다라는 경고 메시지가 표시됩니다.
주어진 예제 코드의 라이브 데모를 보려면 여기를 클릭하십시오.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn