| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

“瀑布流式”图片懒加载JS代码示例

/**   * 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;      };  }