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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JS编程小常识很有用
2012/11/26 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Python函数嵌套实例
2014/09/23 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python写一个随机点名软件的实例
2019/11/28 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
python openssl模块安装及用法
2020/12/06 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
办公室文员工作职责
2014/01/31 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python