js 图片懒加载的实现


Posted in Javascript onOctober 21, 2020

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)?max_imgClientDistance:distance;
      
      // 2.最大距离时,无滚动
      if (distance == max_imgClientDistance) {
        $('#' + imgId)[0].src = imgSrc;
        return;
      }
      
      // 页面绑定滚动事件  
      $(document).scroll(function(){
        
        // 获取网页被卷高度
        // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 距离网页最顶部的距离
        var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
        // 图片的可视高度
        var clientHeight = documentClientHeight - imgClientTop;
        // 到达指定距离差或者图片已经进入视野范围
        if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
          $('#' + imgId)[0].src = imgSrc;
        }
        
      });
    }
  };
  /**
   * 通过单击别的元素时再加载
   * @param clickId
   *  被绑定单击事件的页面元素ID
   * @param imgId
   *  
   * @param imgSrc
   *   懒加载图片的地址
   */ 
  // 
  this.clickLoad = function(clickId,imgId,imgSrc) {
    // 获取该图片的src
    var img_source = $('#' + imgId).attr('src');
    // 只执行一次
    if("" == 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 图片懒加载的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 #Javascript
解决vue-loader加载不上的问题
Oct 21 #Javascript
Vue实现返回顶部按钮实例代码
Oct 21 #Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
element中table高度自适应的实现
Oct 21 #Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python函数调用追踪实现代码
2020/11/27 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
内容编辑个人求职信
2013/12/10 职场文书
银行实习鉴定
2013/12/13 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
考试违纪检讨书
2014/02/02 职场文书
工作岗位说明书模板
2014/05/09 职场文书
护士工作失误检讨书
2014/09/14 职场文书
涨价通知
2015/04/23 职场文书
保护环境的宣传语
2015/07/13 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python