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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
javascript 事件绑定问题
Jan 01 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
论JavaScript模块化编程
Mar 07 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
原生JavaScript实现换肤
Feb 19 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
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
lib.utf.js
2007/08/21 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python3中property使用方法详解
2019/04/23 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
运动会广播稿200字
2014/01/15 职场文书
销售总经理岗位职责
2014/03/15 职场文书
实习介绍信模板
2015/01/30 职场文书
入党积极分子群众意见
2015/06/01 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电