js实现网页图片延时加载 提升网页打开速度


Posted in Javascript onJanuary 26, 2016

提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法。代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间。本文采用图片异步延迟加载的方法,来提升本站页面加载速度。

图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验。

有很多技术性文章的配图是非常多的,如果打开网页时要求能够一次性加载完成所有图片的话,用户等候的时间肯定就得非常长了。这种做法会让用户体验非常不好,况且也没有必要一次性把页面上的所有图片都加载出来。图片异步延迟加载,才是网页设计中最合理最恰当的做法。

js实现网页图片延时加载 提升网页打开速度

我们用 jquery.lazyload.js 来实现图片异步延迟加载,记得要先载入 jQuery 才行。

1、导入 JS 插件:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

2、在页面中插入 JavaScript 代码:

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

通过以上两步,就能简单实现网页图片异步延时加载了。

再为大家具体介绍一下:
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。

推荐:使用jquery图片延迟加载插件jquery.lazyload实现图片延迟

实现原理:

把所有需要延时加载的图片改成如下的格式:

<img lazy_src="图片路径" border="0"/>

然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片):

JS代码:

lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  var lazy_load_tag;
 
  function initVar(tags) {
 
    doc_body = document.body;
 
    doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
 
    lazy_load_tag = tags || ["img", "iframe"];
 
  };
 
  function initElementMap() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    for (var i = 0,
 
len = lazy_load_tag.length; i < len; i++) {
 
      var el = document.getElementsByTagName(lazy_load_tag[i]);
 
      for (var j = 0,
 
len2 = el.length; j < len2; j++) {
 
        if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      if (map_element[t_index]) {
 
        map_element[t_index].push(i);
 
      } else {
 
        //按距上距离保存一个队列
 
        var t_array = [];
 
        t_array[0] = i;
 
        map_element[t_index] = t_array;
 
        download_count++; //需要延时加载的图片数量
 
      }
 
    }
 
  
 
  };
 
  function initDownloadListen() {
 
    if (!download_count) return;
 
    var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
 
    //可视化区域的offtset=document的高+
 
    var visio_offset = offset + doc_element.clientHeight;
 
    if (last_offset == visio_offset) {
 
      setTimeout(initDownloadListen, 200);
 
      return;
 
    }
 
    last_offset = visio_offset;
 
    var visio_height = doc_element.clientHeight;
 
    var img_show_height = visio_height + offset;
 
    for (var key in map_element) {
 
      if (img_show_height > key) {
 
        var t_o = map_element[key];
 
        var img_vl = t_o.length;
 
        for (var l = 0; l < img_vl; l++) {
 
          element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
 
        }
 
        delete map_element[key];
 
        download_count--;
 
      }
 
    }
 
    setTimeout(initDownloadListen, 200);
 
  };
 
  function getAbsoluteTop(element) {
 
    if (arguments.length != 1 || element == null) {
 
      return null;
 
    }
 
    var offsetTop = element.offsetTop;
 
    while (element = element.offsetParent) {
 
      offsetTop += element.offsetTop;
 
    }
 
    return offsetTop;
 
  }
 
  function init(tags) {
 
    initVar(tags);
 
    initElementMap();
 
    initDownloadListen();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

使用方法:把页面上需要延时加载的图片src改成为lazy_src,然后把上面的js放到body最后面,然后调用:lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外:
如果你的页面上存在有内容切换的栏目的话,可能在切换时切换的内容里的图片可能会不显示,处理的方法是在内容时单独图片加载处理,如:

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

  所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行。

  看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我想找这样一种插件,让网页只加载浏览器视野范围内的图片,没出现在范围内的图片就暂不加载,等用户滑动滚动条时再逐步加载,lazyload就是用来实现这种效果。
lazyload.js其实是jQuery的一个插件,全称是jquery.lazyload.js,看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是javascript写的,所以适用于所有网页,包括Wordpress。

  想要使用lazyload,得先载入jQuery,它是依靠jQuery来实现效果的。

以上就是本文的全部内容,希望大家对js实现网页图片延时加载有了更深入的学习了解。

Javascript 相关文章推荐
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
JavaScript门面模式详解
Oct 19 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
详解javascript new的运行机制
Jan 26 #Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 #Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 #Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 #Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 #Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 #Javascript
You might like
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
使用jquery实现放大镜效果
2014/09/02 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python出现segfault错误解决方法
2016/04/16 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
pytorch中的inference使用实例
2020/02/20 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Python中有几个关键字
2020/06/04 Python
重构Python代码的六个实例
2020/11/25 Python
python matlab库简单用法讲解
2020/12/31 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
C语言面试题
2015/10/30 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python