실제 영상을 다운로드하는 동안 로딩 영상을 표시하는 방법

실제 영상을 다운로드하는 동안 로딩 영상을 표시하는 방법

이 질문에는 이미 다음과 같은 답변이 있습니다.

자바스크립트를 통해 이미지를 로드하면서 스피너를 보여주는 방법 (13개 답변)

닫힘7년 전에.

브라우저에서 이미지를 렌더링하는 데 시간이 걸리는 경우도 있습니다.실제 이미지를 다운로드 받는 동안 바쁜 이미지를 보여주고 싶고, 이미지를 다운로드 받으면 바쁜 이미지를 제거하고 실제 이미지를 보여줘야 합니다.JQuery나 다른 자바스크립트로 어떻게 할 수 있습니까?

CSS를 사용하여 모든 이미지에 배경 이미지를 추가하면 됩니다.

img {
  background: url('loading.gif') no-repeat;
}

다음과 같은 작업을 수행할 수 있습니다.

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

할당합니다.load이미지 로드가 완료되면 실행되는 이미지에 대한 이벤트입니다.그 전에 로더 이미지를 표시할 수 있습니다.

@Sarfraz가 올린 것과 비슷한 기술을 사용합니다. 요소를 숨기는 대신 로드하는 이미지의 클래스를 조작할 뿐입니다.

<style type="text/css">
.loading { background-image: url(loading.gif); }
.loaderror { background-image: url(loaderror.gif); }
</style>
...
<img id="image" class="loading" />
...
<script type="text/javascript">
    var img = new Image();
    img.onload = function() {
        i = document.getElementById('image');
        i.removeAttribute('class');
        i.src = img.src;
    };
    img.onerror = function() {
        document.getElementById('image').setAttribute('class', 'loaderror');
    };
    img.src = 'http://path/to/image.png';
</script>

제 경우에는 이미지가 로드되지 않는 경우가 있어서 onerror 이벤트를 처리하여 이미지 클래스를 변경하여 브라우저의 깨진 이미지 아이콘이 아닌 오류 배경 이미지를 표시합니다.

https://stackoverflow.com/a/4635440/3787376, 에서 인용한 이 방법을 사용하는 대신

다음과 같은 작업을 수행할 수 있습니다.

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

할당합니다.load이미지 로드가 완료되면 실행되는 이미지에 대한 이벤트입니다.그 전에 로더 이미지를 표시할 수 있습니다.

다른 jQuery 기능을 사용하여 로딩 이미지를 희미하게 만든 다음 숨길 수 있습니다.

// Show the loading image.
$('#loader_img').show();

// When main image loads:
$('#main_img').on('load', function(){
  // Fade out and hide the loading image.
  $('#loader_img').fadeOut(100); // Time in milliseconds.
});

"불투명도가 0에 도달하면 디스플레이 스타일 속성이 none으로 설정됩니다." http://api.jquery.com/fadeOut/

또는 이미 간단한 크로스 브라우저 자바스크립트 메소드가 있기 때문에 jQuery 라이브러리를 사용할 수 없습니다.

백그라운드에서 이미지 로드가 완료되면 호출이 실행되는 콜백과 함께 자바스크립트 컨스트럭터를 사용합니다.방금 사용했는데 크로스 브라우저에서 잘 작동합니다.답은 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading