LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】JS实现WEB页面上的图片动态懒加载

admin
2023年5月24日 10:11 本文热度 718

1.懒加载原理

图片未进入可视区域时,先不加载图片可以加载指定的动态提示图片。

2.懒加载思路及实现

实现懒加载有四个步骤,如下:
1.加载提示图片
2.判断哪些图片要加载
3.隐形加载图片
4.替换真图片

1.加载loading图片是在html部分就实现的

2.如何判断图片进入可视区域是关键。

引用网友的一张图,可以很清楚的看出可视区域。

fb04b9d6c0b23655ab7ba867d3d06b1c.png

如上图所示,让在浏览器可视区域的图片显示,可视区域外的不显示,所以当图片距离顶部的距离top->height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了,就是说当top->height<=s+h时,图片在可视区。

常用API函数:
页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;

HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离。window.innerHeight:浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。

1.   // onload是等所有的资源文件加载完毕以后再绑定事件

2.   window.onload = function(){

3.    // 获取图片列表,即img标签列表

4.    var imgs = document.queryselectorAll('img');

5.    

6.    // 获取到浏览器顶部的距离

7.    function getTop(e){

8.    console.log('e.offsetTop', e.offsetTop)

9.    return e.offsetTop;

10.     }

11.  

12.  // 懒加载实现

13.  function lazyload(imgs){

14.  // 可视区域高度

15.  var h = window.innerHeight;

16.  //滚动区域高度

17.  var s = document.documentElement.scrollTop || document.body.scrollTop;

18.  for(var i=0;i<imgs.length;i++){

19.  //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载

20.  if ((h+s)>getTop(imgs[i])) {

21.  // 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s

22.                 (function(i){

23.  setTimeout(function(){

24.  // 不加立即执行函数i会等于9

25.  // 隐形加载图片或其他资源,

26.  //创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载

27.  var temp = new Image();

28.  temp.src = imgs[i].getAttribute('src');//只会请求一次

29.  // onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点

30.  temp.onload = function(){

31.  // 获取自定义属性src,用真图片替换假图片

32.  imgs[i].src = imgs[i].getAttribute('src')

33.                         }

34.                     },2000)

35.                 })(i)

36.             }

37.         }

38.     }

39.  lazyload(imgs);

40.  

41.  // 滚屏函数

42.  window.onscroll =function(){

43.  lazyload(imgs);

44.     }

45. }



该文章在 2023/5/24 10:22:55 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved