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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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
php xml文件操作实现代码(二)
2009/03/20 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
深入php数据采集的详解
2013/06/02 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python中sleep函数用法实例分析
2015/04/29 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
纪念9.18事变演讲稿
2014/09/14 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL
方法汇总:Python 安装第三方库常用
2022/04/26 Python