最简单的js懒加载分享给大家-长春网站建设【筱航科技】

发布时间:2020-03-16 23:10:54 作者:筱航科技 来源:本站 浏览量(95) 点赞(45)
摘要:最简单的方法实现图片懒加载,先显示加载图片,等加载完成后显示完整图片实现效果如下所示

  图片懒加载,先显示加载图片,等加载完成后显示完整图片

  实现效果如下所示:

  1577538329140014.gif

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的JavaScript图像延迟加载库Echo.js演示1</title>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1>
<div>
  <div>
    <img lazyLoadSrc="images/img.png"><span></span>
  </div>
  <div>
    <img lazyLoadSrc="images/img.png"><span></span>
  </div>
  <div>
    <img lazyLoadSrc="images/img.png"><span></span>
  </div>
  <div>
    <img lazyLoadSrc="images/img.png"><span></span>
  </div>
</div>
<style>
.patent-left .img-box{min-height:230px;}
.loading{z-index:1;width:100%;min-height:230px;display:inline-block;position:absolute;top:0;left:0;background: url(/static/images/loading.gif) no-repeat center center}
.loading img{display:block;margin:0 auto;}
.lazy-image{position:relative;z-index:5}
</style>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
/**
* 图片延迟加载插件
*   @author ydx
  *   2015.5.19
*/
(function(window, $){
  //图片延迟加载实现函数
  var YdxLazyLoad = function(window, $) {
    //默认参数
    var defaultOption = {
        threshold: 0, //灵敏度
              failure_limit : 0,
              event: "scroll resize", //触发事件
              effect: "fadeIn", //显示模式,支持jquery所有显示方式
              container: window, //容器
              effectTime: 300, //图片显示时间
              callback: null //图片显示后执行的回调函数
      };
    //option参数管理器
    var optionHandel = {
      //设置参数对象
      setOption : function(element, opt) {
        return element.data("_YdxLazyLoadOption_", opt);
      },

      //获取参数对象
      getOption : function(element) {
        return element.data("_YdxLazyLoadOption_");
      },

      //删除对象参数
      removeOption : function(element) {
        return element.removeData("_YdxLazyLoadOption_");

      }
    };
    //判断图片元素位置
    var checkPosition = {
      ////判断是否在纵向滚动条之上
        above : function(element) {
            var fold, 
          $window = $(window),
          option = optionHandel.getOption(element);
            
            if (option.container === undefined || option.container === window) {
                fold = $window.height() + $window.scrollTop();
            } else {
                fold = $(option.container).offset().top + $(option.container).height();
            }

            return fold >= $(element).offset().top + option.threshold;
        },
      //判断是否在纵向滚动条之下
      below : function(element) {
            var fold, 
          $window = $(window),
          option = optionHandel.getOption(element);
            
            if (option.container === undefined || option.container === window) {
                fold = $window.height() + $window.scrollTop();
            } else {
                fold = $(option.container).offset().top + $(option.container).height();
            }

            return fold <= $(element).offset().top - option.threshold;
      },
      //判断是否在横向滚动条左侧
        left : function(element) {
            var fold, 
          $window = $(window),
          option = optionHandel.getOption(element);
            
            if (option.container === undefined || option.container === window) {
                fold = $window.width() + $window.scrollLeft();
            } else {
                fold = $(option.container).offset().left + $(option.container).width();
            }

            return fold >= $(element).offset().left + option.threshold;
        },
        //判断是否在横向滚动条右侧
        right : function(element) {
            var fold, 
          $window = $(window),
          option = optionHandel.getOption(element);

            if (option.container === undefined || option.container === window) {
                fold = $window.width() + $window.scrollLeft();
            } else {
                fold = $(option.container).offset().left + $(option.container).width();
            }

            return fold <= $(element).offset().left - option.threshold;
        },

        flag : function(element) {
        var option = optionHandel.getOption(element);
        return !$.rightoffold(element, element) && !$.leftofbegin(element, element) &&
              !$.belowthefold(element, element) && !$.abovethetop(element, element);
        }
    };
    function showImg() {
      var $this = $(this),
        opt = optionHandel.getOption($this);
      if (!opt.isLoad) {
        var currentImgSrc = opt.src || $this.attr("lazyLoadSrc");
        $(new Image()).attr("src", currentImgSrc).load([opt, $this], function(e) {
          var para = e.data,
            opt = para[0],
            element = para[1];
          element.attr("src", currentImgSrc).hide()[opt.effect](opt.effectTime);
          opt.isLoad = true;
          opt.callback && opt.callback.call(element, currentImgSrc);
          $(this).unbind("load");
          opt.onShow && opt.onShow.call(element);
        });
      }
    }
    //初始化控件
    function init() {
      //默认有lazyLoadSrc属性的都添加延迟加载
      $("[lazyLoadSrc]:visible").each(function(i, element) {
        add($(element));
      });
    }
    /**
    * 添加延迟加载绑定
    * @参数 element: 被绑定的元素
    *   opt: 设置参数
    */    
    function add(element, opt) {
      if (optionHandel.getOption(element)) {
        return;
      }
      //element.load([opt],function(e) {
        //var opt = e.data[0],
        //  element = $(this);
        //合并参数
      opt = $.extend(true, {}, defaultOption, opt);

      //将参数保存到data中,同时绑定显示图片事件
      optionHandel.setOption(element, opt).bind("showImg", showImg);

      var $container = $(opt.container), 
        containerData = {elementMap : {}, num : 0};
      //初始化容器的存储数据
      if (!$container.data("_YdxLazyLoad_container_")) {
        $container.data("_YdxLazyLoad_container_", containerData);
      } else {
        containerData = $container.data("_YdxLazyLoad_container_");
      }

      //将元素保存到容器存储数据中
      opt._index = containerData.num;
      containerData.elementMap[containerData.num++] = element;

      //判断容器是否已绑定事件
      if (!containerData.isBind || containerData.event !== opt.event) {
        $container.bind(opt.event, function(e){
          var data = $(this).data("_YdxLazyLoad_container_"),
            elementMap = data.elementMap;

          //循环判断元素是否满足显示要求
          $.each(elementMap, function(key, el) {
            if (el.data("_YdxLazyLoadOption_")) {
              if (checkPosition.above(el) && checkPosition.left(el)) {
                el.trigger("showImg");
                delete elementMap[key];
              }
            } else {
              delete elementMap[key];
              el.remove();
            }
          });
          return false;
        });
        //标识容器已绑定事件
        containerData.isBind = true;
        containerData.event = opt.event;
      }
      //手动触发一次绑定事件
      $.each(opt.event.split(" "), function(i, event) {
        if (event === 'scroll') {
          var e = $.Event(event, {scrollTop: $('body').scrollTop()});
          $container.trigger(e);
          return;
        }         
        $container.trigger(event);
      });
        //删除load绑定
        //element.unbind("load");
      //})
    }
    /**
    * 删除延迟加载绑定
    * @参数 element: 被绑定的元素
    */
    function remove(element) {
      var opt = optionHandel.getOption(element);
      //删除对应容器中的映射关系
      delete $(opt.container).data("_YdxLazyLoad_container_").elementMap[opt._index];
      //删除元素中的_YdxLazyLoadOption_数据
      optionHandel.removeOption(element);
    }
    return {
      init : init,
      add : add,
      remove : remove
    };

  }(window, $);
  //
  $.fn.YdxLazyLoad = function(opt) {
    return this.each(function() {
      switch($.type(opt)) {
        //不传入参数或者为json对象,则进行add操作
        case "undefined":
        case "object": 
        YdxLazyLoad.add($(this), opt);
        break;
        //传入参数为string类型,则判断为方法调用
        case "string":
        var args = Array.prototype.slice.call(arguments, 1);
        args.unshift($(this));
        YdxLazyLoad[opt].call(YdxLazyLoad, args);
        break;
      } 
    }); 
  };  
})(window, jQuery)  
</script>
  <script type="text/javascript">
  $(function(){
    $("[lazyLoadSrc]").YdxLazyLoad({
        onShow: function () {
            $(this).parent().next().hide()
        }
    });
  });
  </script>
</body>
</html>


筱航科技主营业务: 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城

二维码

扫一扫,关注我们

声明:本文由【筱航科技】编辑上传发布,转载此文章须经作者同意,并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

筱航科技-您身边的网站建设专家

搜索千万次不如咨询1次

主营项目:网站建设,网络营销,SEO优化,微信小程序开发,LOGO设计,产品包装设计,虚拟主机,域名注册,网站安全检测,微信商城等

立即咨询 184-4312-4181
在线客服
点此联系在线客服!