JavaScript 폭포 흐름 이미지 지연 로딩 example_javascript 기술

최근 프로젝트에서는 "지연 로딩"을 사용했으며 업데이트는 주로 모바일 단말기 개발에 사용되므로 라이브러리 파일은 zepto.js를 사용합니다. 물론 jQuery와 함께 사용할 수도 있습니다.

코드는 다음과 같습니다.

/**
 * Created by zhiqiang on 2015/10/14.
 * hpuhouzhiqiang@gmail.com
 * 图片的懒加载
 **/
function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),
 mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
 imgDataSrc, localUrl;

 localUrl = location.href;
 // 获取当前浏览器可视区域的高度
 mobileHeight = $(window).height();

 return function(co) {

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

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

 var that = {};
 var _this = {};
 /**
  * [replaceImgSrc 动态替换节点中的src]
  * @param {[type]} tempObject [description]
  * @return {[type]}  [description]
  */
 _this.replaceImgSrc = function(tempObject) {
  var srcValue;

  $.each(tempObject, function(i, item) {
  imgObject = $(item).find('img[data-lazysrc]');
  imgObject.each(function(i) {
   imgDataSrc = $(this).attr('data-lazysrc');
   srcValue = $(this).attr('src');
   if (srcValue == '#') {
   if (imgDataSrc) {
    $(this).attr('src', imgDataSrc);
    $(this).removeAttr('data-lazysrc');
   }
   }
  });
  });
 };

 /**
  * 首屏判断屏幕上是否出现imglazy节点，有的话就加载图片
  * @param {[type]} i) {   currentNodeTop [description]
  * @return {[type]} [description]
  */
 _this.loadFirstScreen = function() {
  if (conf.loadfirst) {
  lazyNode.each(function(i) {
   currentNodeTop = $(this).offset().top;
   if (currentNodeTop < mobileHeight + 800) {
   _this.replaceImgSrc($(this));
   }
  });
  }
 };

 //当加载过首屏以后按照队列加载图片
 _this.loadImg = function() {
  if (conf.loadimg) {
  $(window).on('scroll', function() {
   var imgLazyList = $('[node-type=imglazy]', node);
   for (var i = 0; i < 5; i++) {
   _this.replaceImgSrc(imgLazyList.eq(i));
   }
  });
  }
 };

 that = {
  replaceImgSrc: _this.replaceImgSrc(),
  mobileHeight: mobileHeight,
  objIsEmpty: function(obj) {
  for (var item in obj) {
   return false;
  }
  return true;
  },
  destory: function() {
  if (_this) {
   $.each(_this, function(i, item) {
   if (item && item.destory) {
    item.destory();
   }
   });
   _this = null;
  }
  $(window).off('scroll');
  }
 };
 return that;
 };
}

이 글이 자바스크립트 이미지 지연 로딩을 배우는 모든 분들에게 도움이 되기를 바랍니다.