이미지 로딩 상태를 확인하고 백분율 효과 로딩 달성

머리말

일부 대용량 외부 리소스로 인해 페이지 로드 속도가 느려질 수 있습니다. 이때 일반적으로 로딩 효과가 추가되는 것은 이미지 로딩 진행률에 따른 로딩 효과입니다. 이미지 로딩 상태

　1.onload onerror

　 이미지가 성공적으로 로딩된 후, 이미지 주소를 다시 요청하는 한 캐시가 있더라도 onload 이벤트가 발생하는 방법을 사용하는 것이 좋습니다. , onload 이벤트가 트리거됩니다. 이미지 로드에 실패하면 onerror 이벤트가 트리거됩니다. 이 방법은 호환성이 좋아서 추천합니다

　　2.imgObj.onreadystatechange

　 일부 브라우저에서는 이 방법을 지원합니다. readState === 'complete'에 따라 이미지 로드 여부를 확인할 수 있습니다.

　 테스트됨:

　 Chrome 및 Firefox는 이 이벤트를 트리거하지 않습니다.

　 IE Edge 버전은 이 이벤트를 트리거하지 않습니다.

　 IE 10 9는 이 이벤트를 트리거합니다. 하위 버전은 테스트되지 않았습니다.

　따라서 권장되지 않습니다.

3 .imgObj.complete

　complete 속성은 이미지가 로드되었는지 여부를 결정할 수 있습니다. 그러나 다른 브라우저는 일관되지 않게 완료를 처리합니다.

　　　이미지 리소스가 정상이면 이미지가 성공적으로 로드됩니다. 모든 브라우저는 false에서 true로 완료됩니다.

　　그러나 이미지 리소스가 비정상이면 이미지 로드가 실패합니다. Chrome 및 Firefox는 로딩 실패 후에는 false에서 true로 바뀌지만 IE는 항상 false입니다

　그래서 이 방법은 권장되지 않습니다.

이미지 리소스 로딩 진행 상황

　단일 이미지 리소스가 로딩되었는지 판단할 수 있으며, 전체 페이지에 대한 모든 이미지 리소스의 로딩 진행 상황을 쉽게 계산할 수 있습니다.

document.addEventListener('DOMContentLoaded', function(){
      var imgs = document.querySelectorAll('img'), //所有图片资源
          show = 0, //百分比
          num = 0; //加载完成的个数
      var all = imgs.length;
      [].slice.call(imgs).forEach(function(element,index){
         //不管是否加载成功，都num+1
        element.addEventListener('load',function(){
          num++;
          show = Math.floor(100*num/all);

        })

        element.addEventListener('error',function(){
          num++;
          show = Math.floor(100*num/all);
        })
      })
    })

　마스크와 백분율 단어를 추가하면 로딩 백분율 효과를 쉽게 얻을 수 있습니다.

　

페이지가 모두 로드된 후

마스크를 숨겨 더욱 친근한 로딩 효과를 얻으세요

    window.onload = function(){
      document.querySelector('.mask').classList.add('hide');
    }

위 내용은 이미지 로딩 상태를 확인하고 백분율 효과 로딩 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!