javascript图片延迟加载实现方法及思路


Posted in Javascript onDecember 31, 2015

本文实例为大家介绍了如何通过javascript来延迟加载图片,分享给大家供大家参考,具体内容如下

当一个网页中含有大量图片时,如果一开始就将图片全部加载完毕,势必会引起性能和效率上的问题,用户可能会由于等待时间过久而离开。

这个时候,我们需要利用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力。

一、延迟加载图片

基本思路如下:
给需要延迟加载的图片设置自定义属性比如lazy-src,存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组,在window.onscroll的时候判断该数组内容是否出现在了用户视线中,如果出现了,就将自定义属性内容赋予图片的src属性。

下面我们来具体谈谈实现步骤。
首先,我们需要定义函数返回浏览器的可视区域位置:

/**
   * @description: 返回浏览器的可视区域位置
   * @return: left:左滑轮距离,top:上滑轮距离,width:可见区域宽度,height:可见区域长度
   */
   function getClient(){
    var l,t,w,h;
    l = document.documentElement.scrollLeft||document.body.scrollLeft;
    t = document.documentElement.scrollTop||document.body.scrollTop;
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    return {left:l,top:t,width:w,height:h};
   }

然后定义函数返回待加载资源的位置:

/**
   * @description: 返回待加载资源位置
   * @params: p:需要加载的资源节点
   * @return: left:左边距离,top:上边距离,width:宽度,height:高度
   */
   function getSubClient(p){
    var l = 0, t = 0, w, h;
    w = p.offsetWidth;
    h = p.offsetHeight;
    while(p.offsetParent){
      l += p.offsetLeft;
      t += p.offsetTop;
      p = p.offsetParent;
    } 
    return {left:l,top:t,width:w,height:h};
   }

接下来定义函数,判断两个矩形区域是否相交:

/**
   * @decription: 判断两个矩阵是否相交,返回一个布尔值
   * @params: rec1,rec2:需要比较的节点矩阵
   * @return: true: 两矩阵相交
   */
   function contains(rec1,rec2){
    var lc1,lc2,tc1,tc2,w1,h1;
    lc1 = rec1.left + rec1.width/2;
    lc2 = rec2.left + rec2.width/2;
    tc1 = rec1.top + rec1.height/2;
    tc2 = rec2.top + rec2.height/2;
    w1 = (rec1.width + rec2.width)/2;
    h1 = (rec1.height + rec2.height)/2;
    return Math.abs(lc1 - lc2)<w1&&Math.abs(tc1 - tc2)<h1;
   }

最后对图片资源进行监视,如果进入用户视野则加载资源:

/**
   * @description: 资源出现在视野中再加载.将资源放入一个数组。
   */
   var arr = document.getElementsByClassName("divX");
   window.onscroll = function(){
    var prec1 = getClient();
    var prec2;
    for(var i = arr.length-1;i>=0;i--){
      if(arr[i]){
        prec2 = getSubClient(arr[i]);
        if(contains(prec1,prec2)){
          //加载资源
          console.log(arr[i].id);
          arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src");
          delete arr[i];
        }
      }
    }
   }

当然,这里只是讲思路,如果用到工程上,还是有很多缺陷,比如性能和兼容性等。所以推荐一款jquery插件:lazyload

1、判断css加载完成

这里顺便说一下如何判断一个web页面的css文件加载完成。我们知道css通过外部文件引入,其实是一个link节点。所以我们只需要通过轮询来判断该link节点的sheet属性或者sheet.cssRules属性,就可以判断该css文件是否完全加载成功。

2、判断图片加载完成

同样的,img标签有一个complete属性,我们只需要通过轮询来查看该属性即可。

function imgLoad(img, callback) {
      var timer = setInterval(function() {
        if (img.complete) {
          callback(img)
          clearInterval(timer)
        }
      }, 50)
    }
    imgLoad(img1, function() {
      p1.innerHTML('加载完毕')
    })

3、判断javascript加载完成

那么如何判断javascript加载完成呢?script节点的onload方法就是加载完成后执行的。ie6和ie7则可通过readyState来判断:

function include_js(file) {
  var _doc = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', file);
  _doc.appendChild(js);
  if (!/*@cc_on!@*/0) { //if not IE
    //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
    js.onload = function () {
      alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
    }
  } else {
    //IE6、IE7 support js.onreadystatechange
    js.onreadystatechange = function () {
      if (js.readyState == 'loaded' || js.readyState == 'complete') {
        alert('IE6、IE7 support js.onreadystatechange');
      }
    }
  }
  return false;
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 #Javascript
详解javascript高级定时器
Dec 31 #Javascript
jQuery动画效果相关方法实例分析
Dec 31 #Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 #Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 #Javascript
jQuery语法小结(超实用)
Dec 31 #Javascript
解决JS无法调用Controller问题的方法
Dec 31 #Javascript
You might like
php 全文搜索和替换的实现代码
2008/07/29 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Angular6新特性之Angular Material
2018/12/28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
计算机专业自我鉴定
2013/10/15 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
任命书模板
2014/06/04 职场文书
工程项目合作意向书
2015/05/08 职场文书
党支部鉴定意见
2015/06/02 职场文书
警示教育片观后感
2015/06/17 职场文书
初中思品教学反思
2016/02/20 职场文书
python xlwt模块的使用解析
2021/04/13 Python