JavaScript Waterfall 흐름 이미지 지연 로딩 예시 분석 및 최적화_javascript 기술

이전에 이미지의 "지연 로딩"에 대한 기사를 쓴 적이 있습니다. 주말에 파일을 정리할 때 이전에 작성한 코드를 살펴보니 최적화할 수 있는 곳이 많이 있다는 것을 알았습니다.
이번 글은 주로 이전 글 "javascript Waterfall flow image Lazy Loading example" 를 결합하여 이미지의 "Lazy Loading"에 대한 지식을 살펴봅니다.

이미지 "지연 로딩"의 목적:
필요에 따라 이미지를 로드합니다. 즉, 표시해야 할 때 표시할 이미지를 로드하여 일회성 로드에 따른 네트워크 대역폭 오버헤드를 줄입니다.

먼저 코드를 살펴보겠습니다.

 var conf = {
   'loadfirst': true,
   'loadimg': true
  };

  for (var item in conf) {
   if (item in co) {
    conf.item = co.item;
   }
  }

여기서는 주로 사용자 구성과 기본 구성의 병합을 달성하고 싶습니다. 이와 같은 코드를 작성하는 것은 그리 우아하지 않습니다. 이제 최적화를 위해 $.extend를 사용합니다.

_this.setting = {
   "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
   "loadNum": 1 //滚动时，当前节点之后加载个数
  };

  $.extend(_this.setting, _this.getSetting());

여기에서는 새로 추가된 두 매개변수 mobileHeight 및 loadNum에 중점을 둘 것입니다

mobileHeight는 기본 클라이언트의 높이입니다. 값이 클수록 첫 화면에 더 많은 이미지가 로드됩니다.

loadNum 현재 노드가 화면에 나타나면 현재 노드 뒤의 여러 노드를 한 번에 로드할 수 있으므로 이미지 로딩 속도가 빨라질 수 있습니다.

내 코드는 이전에 다음과 같이 작성되었습니다.

_this.loadFirstScreen = function() {
   if (conf.loadfirst) {
    lazyNode.each(function(i) {
     currentNodeTop = $(this).offset().top;
     //这里的800就是上面提到的mobileHeight
     if (currentNodeTop < mobileHeight + 800) {
      _this.replaceImgSrc($(this));
     }
    });
   }
  };

_this.loadImg = function() {
   if (conf.loadimg) {
    $(window).on('scroll', function() {
     var imgLazyList = $('[node-type=imglazy]', node);
     //这里的5就是上面提到的loadNum
     for (var i = 0; i < 5; i++) {
      _this.replaceImgSrc(imgLazyList.eq(i));
     }
    });
   }
  };

구성 가능한 아이디어에 따라 현재 코드를 최적화하려면 다음과 같습니다.

loadFirstSrceen: function() {
   // 加载首屏
   var _this = this;
   var currentNodeTop;
   var imgNodeList = _this.imgNode;
   $(imgNodeList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
     _this.replaceImgSrc($(this));
    }
   });
  },
  scrollLoadImg: function() {
   //滚动的时候加载图片
   var _this = this;
   var currentNodeTop;
   var scrollTop = $('body').scrollTop();
   var imgLazyList = $('[node-type=imglazy]');

   $(imgLazyList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop - scrollTop < _this.mobileHeight()) {
     //加载当前节点后的规定个数节点
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  }

더 중요한 측면은 플러그인 작성 아이디어에 따라 현재 코드 구조를 구성하는 것입니다. 코드는 다음과 같습니다.

;(function($) {
 var LoadImgLazy = function(imgNode) {
  var _this = this;
  _this.imgNode = imgNode;

  _this.setting = {
   "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
   "loadNum": 1 //滚动时，当前节点之后加载个数
  };

  $.extend(_this.setting, _this.getSetting());

  _this.loadFirstSrceen();
  $(window).on('scroll', function() {
   _this.scrollLoadImg();
  });


 };

 LoadImgLazy.prototype = {
  mobileHeight: function() {
   return $(window).height();
  },
  loadFirstSrceen: function() {
   // 加载首屏
   var _this = this;
   var currentNodeTop;
   var imgNodeList = _this.imgNode;
   $(imgNodeList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
     _this.replaceImgSrc($(this));
    }
   });
  },
  scrollLoadImg: function() {
   //滚动的时候加载图片
   var _this = this;
   var currentNodeTop;
   var scrollTop = $('body').scrollTop();
   var imgLazyList = $('[node-type=imglazy]');

   $(imgLazyList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop - scrollTop < _this.mobileHeight()) {
     //加载当前节点后的规定个数节点
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  },
  replaceImgSrc: function(loadImgNode) {
   //动态替换图片
   var srcValue;
   var imgDataSrc;
   var _this = this;
   var imgUrlList = $(loadImgNode).find('img[data-lazysrc]');

   if (imgUrlList.length > 0) {
    imgUrlList.each(function(i) {
     imgDataSrc = $(this).attr('data-lazysrc');
     srcValue = $(this).attr('src');
     if (srcValue === '#') {
      if (imgDataSrc) {
       $(this).attr('src', imgDataSrc);
       $(this).removeAttr('data-lazysrc');
      }
     }
    });
    //移除已经运行过懒加载节点的node-type 对性能提升
    $(loadImgNode).removeAttr('node-type');
   }
  },
  getSetting: function() {
   var userSetting = $('[lazy-setting]').attr('lazy-setting');
   if (userSetting && userSetting !== '') {
    return $.parseJSON(userSetting);
   } else {
    return {};
   }
  },
  destory: function() {
   //销毁方法区
   $(window).off('scroll');
  }
 };

 LoadImgLazy.init = function(imgNode) {
  new this(imgNode);
 };

 window.LoadImgLazy = LoadImgLazy;

})(Zepto);

이 글을 통해 JavaScript Waterfall Flow 이미지 지연 로딩에 대해 더 깊이 이해하고 최적화하는 방법을 배우시기 바랍니다.