`

js实现网页图片延时加载的原理和代码

阅读更多

 

大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页

 

 

大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。
实现原理
把所有需要延时加载的图片改成如下的格式:

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

 

 

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

 

 

  1. lazyLoad=( function () {   
  2. var  map_element = {};   
  3. var  element_obj = [];   
  4. var  download_count = 0;   
  5. var  last_offset = -1;   
  6. var  doc_body;   
  7. var  doc_element;   
  8. var  lazy_load_tag;   
  9. function  initVar(tags) {   
  10. doc_body = document.body;   
  11. doc_element = document.compatMode ==  'BackCompat'  ? doc_body: document.documentElement;   
  12. lazy_load_tag = tags || [ "img" "iframe" ];   
  13. };  
  14.  
  15.    
  16. function  initElementMap() {   
  17. var  all_element = [];   
  18. //从所有相关元素中找出需要延时加载的元素   
  19. for  ( var  i = 0,   
  20. len = lazy_load_tag.length; i < len; i++) {   
  21. var  el = document.getElementsByTagName(lazy_load_tag[i]);   
  22. for  ( var  j = 0,   
  23. len2 = el.length; j < len2; j++) {   
  24. if  ( typeof (el[j]) ==  "object"  && el[j].getAttribute( "lazy_src" )) {   
  25. element_obj.push(all_element[key]);   
  26. }   
  27. }   
  28. }   
  29.    
  30. for  ( var  i = 0,   
  31. len = element_obj.length; i < len; i++) {   
  32. var  o_img = element_obj[i];   
  33. var  t_index = getAbsoluteTop(o_img);  
  34. //得到图片相对document的距上距离   
  35. if  (map_element[t_index]) {   
  36. map_element[t_index].push(i);   
  37. else  {   
  38. //按距上距离保存一个队列   
  39. var  t_array = [];   
  40. t_array[0] = i;   
  41. map_element[t_index] = t_array;   
  42. download_count++; //需要延时加载的图片数量   
  43. }   
  44. }   
  45.    
  46. };   
  47. function  initDownloadListen() {   
  48. if  (!download_count)  return ;   
  49. var  offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop;   
  50. //可视化区域的offtset=document的高+   
  51. var  visio_offset = offset + doc_element.clientHeight;   
  52. if  (last_offset == visio_offset) {   
  53. setTimeout(initDownloadListen, 200);   
  54. return ;   
  55. }   
  56. last_offset = visio_offset;   
  57. var  visio_height = doc_element.clientHeight;   
  58. var  img_show_height = visio_height + offset;   
  59. for  ( var  key  in  map_element) {   
  60. if  (img_show_height > key) {   
  61. var  t_o = map_element[key];   
  62. var  img_vl = t_o.length;   
  63. for  ( var  l = 0; l < img_vl; l++) {   
  64. element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute( "lazy_src" );   
  65. }   
  66. delete  map_element[key];   
  67. download_count--;   
  68. }   
  69. }   
  70. setTimeout(initDownloadListen, 200);   
  71. };   
  72. function  getAbsoluteTop(element) {   
  73. if  (arguments.length != 1 || element ==  null ) {   
  74. return   null ;   
  75. }   
  76. var  offsetTop = element.offsetTop;   
  77. while  (element = element.offsetParent) {   
  78. offsetTop += element.offsetTop;   
  79. }   
  80. return  offsetTop;   
  81. }   
  82. function  init(tags) {   
  83. initVar(tags);   
  84. initElementMap();   
  85. initDownloadListen();   
  86. };   
  87. return  {   
  88. init: init   
  89. }   
  90. })();  

 

 

 

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

 

  1. chlid.find( "img[init_src]" ).each( function (){   
  2. $( this ).attr( "src" ,$( this ).attr( "init_src" ));   
  3. $( this ).removeAttr( "init_src" );   
  4.    
  5. }); 

 

 

分享到:
评论

相关推荐

    原生javaScript实现图片延时加载的方法

    首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码。 图片延时加载原理 图片延时加载原理是在html里面的图片...

    js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    本文为大家分享了js实现延迟加载思想和首屏延迟加载的具体代码,供大家参考,具体内容如下 作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了) 原理:  1)、对于首屏内容中的图片:首先给对应的...

    JS实现图片懒加载(lazyload)过程详解

    对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。 所以,对于图片过多的...

    原生Js页面滚动延迟加载图片实现原理及过程

    原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的...原生Js页面滚动延迟加载图片&lt;/title&gt; &lt;style type=”text/css”&gt; *{margin: 0

    网络图片延迟加载实现代码 超越jquery控件

    给泡泡网开发控件,本来想直接用JQ的延迟控件,但是JQ的延迟控件只是加快了加载速度,没有省带宽,也就是说JQ的懒加载并没有实际提升图片的传输量,本人讲不明白,还是请各位把代码DOWN了以后验收 {ht

    jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。...

    Javascript 实现广告后加载 可加载百度谷歌联盟广告 原创

    先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告。 下面我们看具体的实现步骤: 一、在页面上放置占位符,其实就是一个span...

    超实用的jQuery代码段

    《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的jQuery代码段进行了全方位的介绍和演示。全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形...

    javascript 文件的同步加载与异步加载实现原理

    延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外,其他浏览器并未支持。 language: 已废弃。大部分浏览器会忽略该值。 src: 可...

    【JavaScript源代码】vue手写加载动画项目.docx

    使其成为圆形,再给该div3px的边框并设为透明,然后在单独设置上边框为白色,用::before,::after伪类absolute定位并进行同样设置,不同之处是依次增大留出的间隙,以及动画执行时间变长和设置延迟,这样就能形成...

    JAVA上百实例源码以及开源项目源代码

    util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码加以...

    基于Vue+SpringCloud博客的设计与实现 有论文

    博客中心是博客的核心,分页和轮滑加载均实现,用Redisson来实现分布式锁控制文章 搜索引擎中心:文章提示信息的增删改查,分页,高亮模糊排序查询 用户的消息中心:websocket聊天与用户的所有个人消息 用户的个人...

    【JavaScript源代码】浅谈Angular的12个经典问题.docx

    浅谈Angular的12个经典...如何在Angular 2中启用延迟加载?7. 在Angular 2应用中,我们应该注意哪些安全威胁?8. 如何优化Angular 2应用程序来获得更好的性能?9. 如何实现不出现编辑器警告的自定义类型?10. 什么是S

    JAVA上百实例源码以及开源项目

    util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码加以...

    jQuery权威指南-源代码

    3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77 3.10.4 代码分析/80 3.11 本章小结/81 第4章 jQuery中的事件与应用/82 4.1 事件机制/...

    Node服务端框架Express-Sequelize-Mysql模型架构设计封装

    它具有强大的事务支持, 关联关系, 预读和延迟加载,读取复制等功能,完美代替了手写SQL的困扰。 Express基于 Node.js 平台,快速、开放、极简的 Web 开发框架。 MySQL是一种关系型数据库管理系统,关系数据库将数据...

    react-lazyimg-component:带有用于延迟加载图像的打字稿的React组件

    react-lazyimg-component v1.0.0 是使用 、、完全重构的,React 图片懒加载小组件。并且组件参考了 动画实现原理 ,引入全新的渐进性自然过渡效果(如下图 方案 B 所示)。 Demo 效果 singsong: Demo 中第一张图片未...

    code:这个仓库是我自己平常写的有问题的代码以及需要优化的代码

    code说明:这个仓库是我自己平常写...imgDelay.js// 图片和广告延迟加载,一个门户网站有用到过,临时写的,有优化空间,以后有时间再优化吧。reg.run.js// 注册用的表单验证,没什么特别的,优化下估计是个不错的工具

    jQuery权威指南366页完整版pdf和源码打包

    5.6.1 需求分析 5.6.2 效果界面 5.6.3 功能实现 5.6.4 代码分析 5.7 本章小结 第6章 ajax在jquery中的应用 6.1 加载异步数据 6.1.1 传统的javascript方法 6.1.2 jquery中的load()方法 6.1.3 ...

Global site tag (gtag.js) - Google Analytics