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 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
node使用promise替代回调函数
May 07 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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 输出简单动态WAP页面
2009/06/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
试用php中oci8扩展
2015/06/18 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
python使用opencv读取图片的实例
2017/08/17 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
领导的自我鉴定
2013/12/28 职场文书
学习自我鉴定
2014/02/01 职场文书
房产继承公证书
2014/04/09 职场文书
大学学风建设方案
2014/05/04 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
消防宣传语大全
2015/07/13 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫