js 그림 로드 효과 인 스 턴 스 코드(로드 지연+폭포 흐름 로드)

8216 단어 js폭포 류로드
주로 두 가지 그림 로드 효 과 를 만 들 었 습 니 다.
하 나 는 페이지 그림 이 많 을 때 읽 기 효과 가 있 는 로 딩 알림 입 니 다.(올 바른 로 딩 을 검증 하기 위해 1 초 동안 로 딩 간격 을 설정 하 였 습 니 다)
또 하 나 는 슬라이더 의 위치 에 따라 그림 을 미리 불 러 오고 사용자 가 눈치 채 지 못 한 상태 에서 폭포 흐름 의 로드 효 과 를 실현 하 는 것 이다.
로드 지연
주요 사고방식:
  • HTML 의 img 탭 에 정확 한 주 소 를 data-src 속성 에 저장 하고 모든 그림 에 원 을 도 는 loading 그림 을 background
    • 로 설정 합 니 다.
  • js 에서 각각 img 을 차례대로 읽 고 데이터-src 의 주 소 를 src 로 대체 하여 background
    • 를 제거 합 니 다.
  • 그림 한 장 을 성공 적 으로 불 러 올 때마다 진도 항목 의 백분율 은 상응 한 변 화 를 한다.
  • 불 러 오 는 데 성공 하지 못 하면 그림 불 러 오 는 오 류 를 알려 줍 니 다.
    • HTML 구 조 는 매우 간단 합 니 다.바로 div.picList 가 모든 img 을 감 싼 다음 에 간단 한 진도 바 div\#loadBar 를 추가 합 니 다.
    
<body>
  <div class="picList">
    <img class="lazy" data-src="pic/compressed/picList1.jg">
    <img class="lazy" data-src="pic/compressed/picList2.jpg">
    <img class="lazy" data-src="pic/compressed/picList3.jpg">
    <img class="lazy" data-src="pic/compressed/picList4.jpg">
    <img class="lazy" data-src="pic/compressed/picList5.jpg">
    <img class="lazy" data-src="pic/compressed/picList6.jpg">
    <img class="lazy" data-src="pic/compressed/picList7.jpg">
    <img class="lazy" data-src="pic/compressed/picList8.jpg">
    <img class="lazy" data-src="pic/compressed/picList9.jpg">
    <img class="lazy" data-src="pic/compressed/picList10.jpg">
  </div>

  <div id="loadBar">
    <div id="loadBarMask"></div>
  </div>
</body>
    css(사용 하 는 scss,컴 파일 시 자동 으로 호 환 접두사 추가)
    
.picList{
  img{
    width: 100px;
    height: 100px;
    position: relative;

    /*           */
    &:after{
      content: "( ⊙ o ⊙ )    ";
      font-size: 6px;
      font-family: FontAwesome;
      color: rgb(100, 100, 100);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
  }
}

.lazy{
  background: url(../pic/loading.gif) center no-repeat;
  border: 1px solid black;
}

#loadBar{
  width: 200px;
  height: 15px;
  background: linear-gradient(90deg,#187103,#81b50b,#187103);
  border: 10px solid white;

  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -100px;

  #loadBarMask{
    width: 70%;//               
    height: 100%;
    background-color: beige;
    position: absolute;
    right: 0;
  }
}
    css 에서 주의해 야 할 부분 은 두 가지 가 있 습 니 다.
  • 하 나 는 그림 을 불 러 오 는 중 오류 가 발생 했 을 때 보 이 는 회색 바탕 문 자 를 img 의 after 위조 류 에 두 었 습 니 다.그림 을 불 러 오 는 데 실 패 했 을 때 background 의 gif 그림 을 제거 하면 이 부분의 내용 과 스타일 이 표 시 됩 니 다.
  • 하 나 는 진도 바 스타일 입 니 다.간단하게 썼 는데,주로 그 라 데 이 션 이 있 는 녹색 과 흰색 이 겹 쳐 져 있다.녹색 은 불 러 왔 음 을 표시 하고 흰색 은 불 러 오지 않 았 음 을 표시 합 니 다.표시 할 때 흰색 의 너 비 를 직접 조절 하면 됩 니 다.
    • js 부분(loadPicPerSecond()을 직접 실행 하면 됩 니 다)
    
var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var activePic = 0;
var totalPic = lazyPic.length;

/*        */

function loadPicPerSecond(){

  lazyPic.each(function(index){

    var self = $(this);

    //console.log(self[0].complete);
    /*img        html ，     complete      true*/

    setTimeout(function(){

      src[index] = self.attr('data-src');
      self.attr('src',src[index]);
      self.removeClass('lazy');

      //      src    ，       onload  
      self[0].onload = function(){

        //    loadBar  
        countPic();
      }

      //     src      ，     onerror  
      self[0].onerror = function(){
        /*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
        countPic();
      }

    },1000*index);

  })

}

/*  onload                 . onload  ，activePic   1*/

function countPic(){

  activePic++;

  var leftPic = totalPic - activePic;
  var percentPic = Math.ceil(leftPic/totalPic*100);//          ， loadBarMask       

  console.log("   "+(100-percentPic)+"%");

  loadBarMask.css("width",percentPic+"%");

  if(percentPic==0){
    $('#loadBar').hide();
  }
}
    이 폭포 흐름 로드
    주요 사고방식:
  • 창 이 굴 러 가 는 상황 을 감청 하고 불 러 온 그림 의 마지막 장 이 창 에 들 어 갈 때 아래 그림 을 불 러 오기 시작 합 니 다.
  • 모든 그림 주소 가 json 데이터 에 존재 한다 고 가정 하고 10 장의 그림 주 소 를 읽 을 때마다 불 러 온 후에 기 존의 폭포 흐름 끝 에 삽입 합 니 다.
  • 모든 그림 을 불 러 올 때 까지 이렇게 왕복 합 니 다.
    • HTML 은 앞부분 과 같 습 니 다.src 를 정상 주소 로 만 쓰 면 됩 니 다.css 는 완전히 같다.
    js 부분
    
var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var scrollTop,
  clientHeight,
  scrollHeight;

var threshold = 200; //          200px         

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//        
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
  dirtSrc + "20.jpg",
  dirtSrc + "21.jpg",
  dirtSrc + "22.jpg",
  dirtSrc + "23.jpg",
  dirtSrc + "24.jpg",
  dirtSrc + "25.jpg",
  dirtSrc + "26.jpg",
  dirtSrc + "27.jpg",
  dirtSrc + "28.jpg",
  dirtSrc + "29.jpg",
  dirtSrc + "30.jpg",
  dirtSrc + "31.jpg",
  dirtSrc + "32.jpg",
  dirtSrc + "33.jpg",
  dirtSrc + "34.jpg",
  dirtSrc + "35.jpg",
  dirtSrc + "36.jpg",
  dirtSrc + "37.jpg",
  dirtSrc + "38.jpg",
  dirtSrc + "39.jpg",
  dirtSrc + "40.jpg",
  dirtSrc + "41.jpg",
  dirtSrc + "42.jpg",
  dirtSrc + "43.jpg",
  dirtSrc + "44.jpg",
  dirtSrc + "45.jpg",
  dirtSrc + "46.jpg",
  dirtSrc + "47.jpg",
  dirtSrc + "48.jpg",
  dirtSrc + "49.jpg",
]};

//       
var scrollIndex = 0;

$(function(){

  /*        */
  $(window).on('scroll',function(){

    scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
    clientHeight = $(window).height();
    scrollHeight = picList.last().height();//picList.last()[0].clientHeight

    /*                 */
    if(scrollHeight-clientHeight-scrollTop < threshold){
      scrollPic(10);
    }
  })
})

/*          ，    perAmount */

function scrollPic(perAmount = 10){

  var totalAmount = perAmount * (scrollIndex+1);

   //            ，                       ，       totalAmount  
  if(totalAmount>picData.imgSrc.length){
    totalAmount = picData.imgSrc.length;
  }
  for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
    var oimg = new Image();
    oimg.src = picData.imgSrc[scrollIndex];
    picList.append(oimg);
  }

}
    급 한 것 은 바로 scrollTop,height 의 값 을 추출 하 는 대상 입 니 다.항상 기억 이 나 지 않 기 때문에 js 와 jquery 에 따라 모두 적 었 습 니 다.나중에 직접 사용 할 수 있 습 니 다.수치 관 계 를 해결 한 후 조건 만 만족 하면 로 딩 을 촉발 하면 됩 니 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    C\#학습 기초 개념 25 문 1/4 페이지
    C\#학습 기초 개념 25 문 11-15

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage