때로는 프론트 엔드 개발 작업에서 이미지 정보를 얻기 위해 이미지가로드 된 후 이미지의 크기와 크기를 올바르게 얻고 해당 콜백 함수를 실행하여 이미지가 특정 디스플레이 효과를 생성하도록해야합니다. 이 기사는 주로 이미지 로딩 완료를 판단하기위한 몇 가지 일반적인 방법을 구성하고 코드와 실제 응용 프로그램의 조합을 통해 설명하고 설명합니다.
onload 방법
IMG 태그에 Onload 속성을 추가하고 해당 함수를 채우면 후속 Javascipt 코드를 실행합니다. 다음 코드 예제에서 IMG 요소는 기본적으로 표시되지 않습니다. onload에 의해로드가 완료된 후 이미지가 표시되는 것을 결정합니다.
코드 사본은 다음과 같습니다.
<img onload = "get (this)"src = "..."style = 'display : none' />
<script type = "text/javaScript">
함수 get (ts) {
ts.style.display = '블록'; // 사진 표시
}
</스크립트>
장점 : JavaScript 코드 섹션은 페이지의 모든 부분에 배치하여로드 할 수 있으며 대부분의 임의의 이미지에서 사용할 수 있습니다. 사용하기가 비교적 간단하고 이해하기 쉽습니다.
단점 : HTML 코드를 직접 조작 할 수없는 경우 또는 코드를 단순화 해야하는 경우에 적용 할 수없는 각 태그에 OnlaoD 속성을 게시해야합니다.
Javascipt 네이티브 방법
지정된 ID로 그림을 선택하고 ONLOAD를 통해 콜백 메소드를 지정하고 그림이로드 된 후 "이미지로드 완료"라는 단어가 팝업됩니다.
코드 사본은 다음과 같습니다.
<img id = "pic1"src = "..." />
<script language = "javaScript">
document.getElementById ( "pic1"). onload = function () {
경고 ( "이미지로드 완료");
}
</스크립트>
장점 : HTML 코드에 영향을 미치지 않고 간단하고 사용하기 쉬운.
단점 : 하나의 요소 만 지정할 수 있으며 javascipt 코드는 이미지 요소 아래에 배치해야합니다.
jQuery 방법
클래스 PIC1을 사용한 각 이미지 요소 바인딩 이벤트에 대해 요소는 jQuery의로드 방법을 통해 점차 나타납니다.
$ (document) .ready ()에로드 이벤트를 바인딩하지 마십시오.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ (function () {
$ ( '. pic1'). 각 (function () {
$ (this) .load (function () {
$ (this) .fadein ();
});
});
})
</스크립트>
장점 : 요소 이벤트는 배치로 바인딩 될 수 있으며 HTML 코드 컨텐츠에 영향을 미치지 않습니다.
단점 : jQuery 라이브러리의 지원이 필요하며 코드는 작동 해야하는 요소 아래에 배치해야합니다.