1.使用场景

  当网页上有大量图片需要加载时,如果一次性将图片全部加载完,网页加载时间会过长;

  网页本身已经反应很慢了,如果你的页面上又需要引用图片,这时候同样是雪上加霜。

2.图片懒加载原理

  图片懒加载,只不过是叫法比较高大上而已,其实现方式很简单,就是在需要的时候再给图片的src属性赋值,仅此而已。

3.代码实现

/**
 * 图片懒加载
 */
function ImgLazyLoad() {
  /**
   * 滚动到图片所在位置再加载
   * @param imgId
   *   懒加载图片的ID
   * @param imgSrc
   *   懒加载图片的地址
   * @param distance
   *  图片的可视距离(这个参数可以不传)    
   */
  this.scrollLoad = function(imgId,imgSrc,distance) {    
    // 获取该图片的src
    var img_source = $('#' + imgId).attr('src');
    // 只执行一次
    if("" == img_source) {
      // 不滚动的情况下,网页的可见高度
      var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
      // 获取该图片距离网页顶部的距离
      var imgOffsetTop = $('#' + imgId)[0].offsetTop;
      // 获取网页的可见高度
      // var bodyClientHeight = document.body.clientHeight;
      
      // 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight),就不会发生滚动事件
      if (imgOffsetTop < documentClientHeight) {
        $('#' + imgId)[0].src = imgSrc;
        return;
      }      
      
      // 获取屏幕高度
      //var screenHeight = window.screen.height;
      // 图片距离网页左上角的纵向偏移距离(距离网页顶部的距离)
      var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
      // ie下带有小数,所以只取整数
      max_imgClientTop = parseInt(max_imgClientTop);
      // 图片可视距离(还差多少可以被看见)
      var max_imgClientDistance = max_imgClientTop - documentClientHeight;
      //0<= distance <=max_imgClientDistance
      // 1.参数不存在时,设值=0;(图片刚从可视区域最底部出现时,距离达到最小)distance→→Min=0
      // 2.参数>网页可见高度时,设值=可视区域高度;(不滚动时,距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0
      distance = ((distance || 0)>max_imgClientDistance)"" == img_source) {
      // 绑定单击事件
      $('#' + clickId).click(function(){
        $('#' + imgId)[0].src = imgSrc;
      });
    }
  };
};

  调用:

$(function() {
  // 实例化对象
  var ill = new ImgLazyLoad();
  // 调用
  ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);
});

4.涉及知识点

  网上也有很多实现方法,但是不能自定义设置加载图片的时机,为了实现这一点,花了不少功夫才搞好。

  代码很短,但是涉及的知识点很多。

// 获取的是网页的可视区域的高度(不滚动的情况下)
document.documentElement.clientHeight || window.innerHeight
// 获取的是网页的可见高度(除去隐藏元素的高度)
document.body.clientHeight
// 获取的是显示屏的高度
window.screen.height
// 获取网页的被卷高度(ie下不支持前者获取方式)
document.body.scrollTop || document.documentElement.scrollTop  
// 获取指定元素距离网页顶部的距离(静态死值)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top

以上就是js 图片懒加载的实现的详细内容,更多关于js 图片懒加载的资料请关注其它相关文章!

标签:
js,图片加载,js,图片懒加载

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com

评论“js 图片懒加载的实现”

暂无“js 图片懒加载的实现”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?