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 精粹读书笔记(1,2)
Feb 07 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
安装APACHE
2007/01/15 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python中web框架的自定义创建
2019/09/08 Python
python如何提升爬虫效率
2020/09/27 Python
Python实现微信表情包炸群功能
2021/01/28 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
初婚未育证明样本
2014/10/24 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
opencv检测动态物体的实现
2021/07/21 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers