js 이미지 로딩에 관한 것 onload_javascript 기술

먼저 목적을 명확히 하겠습니다.

사용자가 페이지에 들어가면 로딩 아이콘을 표시하고 가장 큰 이미지가 로드될 때까지 기다린 다음 이미지를 불투명하게 합니다.

기능은 매우 간단하지만, 문제는 제가 완전히 완성하지 못했다는 것입니다.

하다보니 자연스럽게 다음과 같은 방법이 생각났습니다.
　

코드 복사 코드는 다음과 같습니다:

$(function(){
$('.banner img').load(function(){
console.log('이미 로드됨')
} );
});

옛말처럼 자신감이 너무 부풀려지면 결국 큰 타격을 입게 된다. 그래서 이것만으로도 충분하다고 생각해서 사장님께 보여드렸어요. 로딩이 안된다고 두번이나 나오더라구요. 안 나온다고 해서 직접 해봤는데 사실이더군요.

그런 다음 정보를 검색한 결과 이것이 캐싱의 원인이라는 것을 알았습니다. 로드할 때 캐시로 인해 브라우저가 로드 이벤트를 실행하지 않기 때문입니다.

코드 복사 코드는 다음과 같습니다.

window.onload=function(){
콘솔 .log('로드됨')

};

헤헤 그래도 안되면 엄지 척 할게요 그러면 또 자신감이 무너져서 사장님께 갖다드리는데 다음날 손님이 전화가 와요. 페이지가 로드되지 않고 계속해서 로드되고 있다고 합니다. 나는 말없이 대답했습니다. 인터넷 속도가 너무 느린 것 같습니다. . . 기다리고 있었는데 잠시 후 대답이 안 나오네요. 기다림이 너무 길었어요.

무기력해서 다양한 방법으로 사진을 압축할 수밖에 없습니다. 압축 후에도 여전히 이상적이지 않다고 느꼈고, 이제 프로젝트는 공간에 던져져 매우 느립니다. .네트워크라면 속도도 느리고 로딩시간도 당연히 느립니다.

사장님이 그렇게 말씀하셨는데 아직 작업이 완료되지 않아서 고민하다가 우연히 외국 사이트에서 캐러셀 이미지 jq 플러그인을 보고 내려와서 소스코드를 살펴보았는데요. 그러면 다음 트릭이 탄생했습니다:

코드 복사 코드는 다음과 같습니다.

var oImg = $('.banner img :eq( 0)');
oImg.attr('src') '?' (new Date()).getTime();
oImg.load(function(){
console.log ('이미 로드 중')
});

테스트한 후에는 페이지에 들어갈 때 이미지 주소에 시간을 추가하여 로드할 때마다 캐시가 없고 이미지 하나만 로드된다는 의미입니다. 이미지가 로드되면 그 이후에는 아무것도 신경쓰지 않습니다.

수정 후 사장님께 말씀드리지 않고 올렸는데, 이번에는 감히 부주의할 수가 없어서 계속 테스트를 해보니, 이번에는 문제가 더 이상 발생하지 않는 것으로 나타났습니다.

페이지가 로드될 때마다 이미지 경로가 다르기 때문에 매번 로드되며 소요되는 시간은 첫 번째 로드와 동일하다고 해서 한 번만 로드해야 한다는 의미는 아닙니다. 그걸 입력해?

어지러워......

수십 번의 시도 끝에 마침내 위의 모든 방법을 물리칠 수 있는 방법을 찾았습니다.

코드 복사 코드는 다음과 같습니다.

function imgloading(){

console .log( '이미 로드됨')
}
//페이지 호출

이것은 이미지 캐싱 문제를 해결할 수 있으며 로드 이벤트는 여전히 발생합니다. 비록 자세히는 이해하지 못하지만 다른 사람들은 이것이 여전히 페이지 로딩 때문이라고 들었습니다. 우리 모두 알고 있듯이 웹 페이지는 위에서 아래로 로드됩니다. img로 로드할 때 페이지가 계속 로드되면 img를 전달한 후 현재 img는 로드가 완료되었음을 나타냅니다. 로드되었으니까 다 로드된 것 같아요. 그래도 로드 도입이 유용할까요?

위 방법에서 페이지가 img에 로드될 때 onload 메서드를 만나고 이 이미지가 나타나기 전에 로드되어야 한다는 것을 아는 것은 어렵지 않습니다.

알겠습니다. . . 이런 문제를 겪고 이보다 더 완벽한 해결책을 찾은 동료가 있는지 모르겠습니다. . 더 완벽한 방법이 있으시면 꼭 메시지를 남겨서 알려주세요. 더 좋은 방법이 있다는 걸 늘 느끼고 있습니다. . .