javascript 이미지_javascript 기술의 지연 로딩 구현 방법 및 아이디어

본 글의 예시에서는 자바스크립트를 통해 이미지 로딩을 지연시키는 방법을 소개하고 있으며, 참고용으로 공유합니다

웹 페이지에 많은 양의 사진이 포함되어 있는 경우 처음에 모든 사진이 로드되면 필연적으로 성능 및 효율성 문제가 발생하며 오랜 대기 시간으로 인해 사용자가 이탈할 수 있습니다.

이때 웹사이트의 친화력을 높이기 위해서는 지연 로딩, 즉 이미지 로딩을 지연시키는 방법을 사용해야 합니다.

1. 이미지 지연 로딩

기본 아이디어는 다음과 같습니다.
느리게 로드해야 하는 이미지에 대해lazy-src와 같은 사용자 정의 속성을 설정하고 이미지 소스에 대한 경로가 존재합니다. 그런 다음 지연 로드가 필요한 모든 이미지를 배열에 넣습니다. window.onscroll을 사용할 때 배열의 내용이 사용자의 시야에 나타나는지 판단하면 사용자 정의 속성 내용이 src에 할당됩니다. 이미지의 속성입니다.

구현 단계에 대해 자세히 이야기해 보겠습니다.
먼저 브라우저의 가시 영역 위치를 반환하는 함수를 정의해야 합니다.

  /**
   * @description: 返回浏览器的可视区域位置
   * @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度
   */
   function getClient(){
    var l,t,w,h;
    l = document.documentElement.scrollLeft||document.body.scrollLeft;
    t = document.documentElement.scrollTop||document.body.scrollTop;
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    return {left:l,top:t,width:w,height:h};
   }

그런 다음 로드할 리소스의 위치를 ​​반환하는 함수를 정의합니다.

/**
   * @description: 返回待加载资源位置
   * @params: p:需要加载的资源节点
   * @return: left:左边距离，top：上边距离，width：宽度，height：高度
   */
   function getSubClient(p){
    var l = 0, t = 0, w, h;
    w = p.offsetWidth;
    h = p.offsetHeight;
    while(p.offsetParent){
      l += p.offsetLeft;
      t += p.offsetTop;
      p = p.offsetParent;
    } 
    return {left:l,top:t,width:w,height:h};
   }

다음으로 두 개의 직사각형 영역이 교차하는지 확인하는 함수를 정의합니다.

  /**
   * @decription: 判断两个矩阵是否相交，返回一个布尔值
   * @params: rec1,rec2:需要比较的节点矩阵
   * @return: true： 两矩阵相交
   */
   function contains(rec1,rec2){
    var lc1,lc2,tc1,tc2,w1,h1;
    lc1 = rec1.left + rec1.width/2;
    lc2 = rec2.left + rec2.width/2;
    tc1 = rec1.top + rec1.height/2;
    tc2 = rec2.top + rec2.height/2;
    w1 = (rec1.width + rec2.width)/2;
    h1 = (rec1.height + rec2.height)/2;
    return Math.abs(lc1 - lc2)<w1&&Math.abs(tc1 - tc2)<h1;
   }

마지막으로 이미지 리소스를 모니터링하고 사용자의 시야에 들어오면 리소스를 로드합니다.

   /**
   * @description: 资源出现在视野中再加载.将资源放入一个数组。
   */
   var arr = document.getElementsByClassName("divX");
   window.onscroll = function(){
    var prec1 = getClient();
    var prec2;
    for(var i = arr.length-1;i>=0;i--){
      if(arr[i]){
        prec2 = getSubClient(arr[i]);
        if(contains(prec1,prec2)){
          //加载资源
          console.log(arr[i].id);
          arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src");
          delete arr[i];
        }
      }
    }
   }

물론 이것은 단지 아이디어일 뿐이지만 엔지니어링에 사용한다면 성능이나 호환성 등 아직 부족한 부분이 많습니다. 그래서 저는 jquery 플러그인을 추천합니다: lazyload

1. CSS 로딩이 완료되었는지 확인

그런데 웹페이지의 CSS 파일이 로드되었는지 판단하는 방법은 다음과 같습니다. 우리는 CSS가 실제로는 링크 노드인 외부 파일을 통해 도입된다는 것을 알고 있습니다. 따라서 CSS 파일이 성공적으로 완전히 로드되었는지 확인하려면 링크 노드의 sheet 속성 또는 sheet.cssRules 속성만 폴링하면 됩니다.

2. 이미지 로드 여부 확인

마찬가지로 img 태그에는 완전한 속성이 있으며 이 속성을 보려면 폴링만 하면 됩니다.

 function imgLoad(img, callback) {
      var timer = setInterval(function() {
        if (img.complete) {
          callback(img)
          clearInterval(timer)
        }
      }, 50)
    }
    imgLoad(img1, function() {
      p1.innerHTML('加载完毕')
    })

3. 자바스크립트가 로드되었는지 확인

그럼 자바스크립트가 로드되었는지 어떻게 판단하나요? 스크립트 노드의 onload 메소드는 로딩이 완료된 후 실행됩니다. IE6과 IE7은 ReadyState로 판단할 수 있습니다:

function include_js(file) {
  var _doc = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', file);
  _doc.appendChild(js);
  if (!/*@cc_on!@*/0) { //if not IE
    //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
    js.onload = function () {
      alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
    }
  } else {
    //IE6、IE7 support js.onreadystatechange
    js.onreadystatechange = function () {
      if (js.readyState == 'loaded' || js.readyState == 'complete') {
        alert('IE6、IE7 support js.onreadystatechange');
      }
    }
  }
  return false;
}

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.