원격 서버에서 이미지를로드 할 때 프리 로더를 표시하는 방법

Question

이미지 요소에 URL을 할당 할 때로드 아이콘을 표시해야합니다. 이 사이트의 다른 질문은 페이지를로드 할 때 이미지에 대한 적절한 프리 로더를 표시하는 방법에 대한 것입니다. 필요한 것은 페이지가로드 된 후 프리 로더를 보여주는 것입니다. 제가 아래에 설명했던 것을 찾고있는 것에는 두 가지 시나리오가 있습니다.

1. 동적으로 DOM 이미지 요소를 만들고이 요소에 URL을 할당합니다. 이렇게하는 동안 요소에 이미지를 표시하는 데 2-3 초 정도 걸리고 2-3 초 동안 아무 것도 공백으로 표시됩니다. 내가해야 할 일은 이미지가로드되면 미리로드 아이콘을 표시하고 숨기는 것입니다.

2. 동적으로 DIV 이미지 요소를 만들고 background:url()에 URL을 할당합니다. 이렇게하는 동안 요소에 이미지를 표시하는 데 2-3 초 정도 걸리고 2-3 초 동안 아무 것도 공백으로 표시됩니다. 내가해야 할 일은 이미지가로드되면 미리로드 아이콘을 표시하고 숨기는 것입니다.

두 시나리오의 프리 로더를 어떻게 표시합니까?

Answer 1

load() 이벤트를 사용하여 수행 할 수 있습니다.

로딩을 처음 시작하면 이미지를 변경하여 프리 로더를 표시하거나 수행하고 싶습니다. 또한 "로드"이벤트를 첨부하십시오.

그런 다음 이미지가로드되면 프리 로더를 제거하고 이미지를 표시하십시오.

CSS 관련 배경 (배경 URL)과 비슷한 트릭을해야합니다. 당신이 할 수있는 일은 (new Image()을 생성함으로써) 직접 이미지를로드하는 반면 배경 URL을 프리 로더 아이콘으로 설정하는 것입니다.

그런 다음 이미지가로드되면 스위치를 수행하십시오. 브라우저는 사용 된 위치에 관계없이 이미지를 한 번만로드하기 때문에 동일한 효과를 가져야합니다.

에서이 일에 좋은 튜토리얼 및 스크린 캐스트가있다

Answer 2

: http://jqueryfordesigners.com/image-loading/

.load() (IE의 이전 버전과 같은) 일부 브라우저에서 기능, 이미지를 너무 잘 작동하지 않지만이 경우 당신의 더 일관성있는 크로스 브라우저 환경을 위해 .load() 대신 https://github.com/JessThrysoee/jquery.imageload을 사용할 수 있습니다.