懒加载效果的实现

最新推荐文章于 2024-05-27 20:30:35 发布
最新推荐文章于 2024-05-27 20:30:35 发布
阅读量589 收藏
点赞数
分类专栏： js技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz_whw/article/details/67116991
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 800px;
height: 600px;
overflow: auto;
list-style: none;
margin: 0 auto;
}

img{
width: 200px;
height: 200px;
float: left;
margin-right: 8px;
margin-bottom: 8px;
}
</style>

</head>
<body>
<ul id="box">
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>
<li><img alt="" data-url="images/1.jpg" /></li>
<li><img alt="" data-url="images/2.jpg" /></li>
<li><img alt="" data-url="images/3.jpg" /></li>
<li><img alt="" data-url="images/4.jpg" /></li>

</ul>
  <script type="text/javascript">
  var oBox = document.querySelector('#box');
  var aLi = oBox.getElementsByTagName('li');


  function loading () {
 
  var boxl = oBox.offsetLeft;
  var boxr = oBox.offsetLeft + oBox.offsetWidth;
  var boxt = oBox.scrollTop;
  var boxb = oBox.scrollTop + oBox.offsetHeight;
  for(var i = 0; i < aLi.length; i ++) {
  var img = aLi[i].firstElementChild;
  var l = img.offsetLeft;
  var r = img.offsetLeft + img.offsetWidth;
  var t = img.offsetTop;
  var b = img.offsetTop + img.offsetHeight;


  var postb = b - boxt;
  var postt = t - boxb;
  var postl = l - boxr;
  var postr = r - boxl;
                    let j = i;
  if(postb > 0 && postt < 0 && postl < 0 && postr > 0) {
  aLi[i].firstElementChild.alt = 'loading...'
                         setTimeout(function () {
                          aLi[j].firstElementChild.src = aLi[j].firstElementChild.getAttribute('data-url');
                         },1000)
 
  }
    }


  }
  loading();
  oBox.onscroll = function () {
  loading();
  }
 
  </script>

</body>
</html>
zz_whw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页内容如何懒加载
wxlly06的博客
03-27 2821
懒加载是一种网页优化技术，可以减少页面初次加载时需要下载的资源量，提高页面加载速度。懒加载的核心思想就是将网页的资源（例如图片、视频等）延迟加载，只有当用户需要滚动页面到该资源的位置时才开始加载。需要注意的是，在实现懒加载时，需要权衡页面的加载速度和用户用于享受资源的时间，以确保在用户需要资源时加载足够快，同时避免用户太早看到空白页面。假设有一篇博客页面，页面上包含多张图片，其中有些图片非常大，加载时间较长，影响页面的加载速度和用户体验。
html 懒加载图片实现方法
young_sam的博客
02-28 1498
** 当每个图片的src都有赋值就把滚动事件移除 *//** 当滚动到对应的每个图片才把src赋值进去 */// 处理当前图片显示，意思是显示一开始滚动区域的图片。/** 动态创建img标签 使用随机图片api */// 处理滚动下滑逻辑显示。/** 滚动事件 */
微信小程序图片懒加载如何实现？
最新发布
越陌度阡
05-27 828
微信小程序开发时，对于有图片的列表在加载时，为了用户体验更好，必需要对图片做懒加载。如下图所示，页面在打开时，图片会按需加载，这样用户体验没有那么生硬。以下将介绍图片懒加载的步骤：1.构建NPM：在小程序目录下初始化npm；2.安装插件：在项目根目录下执行以下命令，安装插件；3.使用插件：在要使用懒加载的页面引入组件......
实现懒加载的四种方式
qq_45472813的博客
09-05 5803
个人封装常用方法工具包： https://github.com/lihai-boop/tool 文章已收录: https://github.com/lihai-boop/Blog 1. 滚动距离计算 offsetTop,scrollTop,clientHeight原生API获取距离像素计算 offsetTop:获取当前元素与其父级元素顶部内边距的距离 scrollTop:当前元素滚动超出的高度 clientHeight:当前元素的可视高度 "灵魂画手"绘图 img元素offsetTop - 父级元素s..
图片懒加载(三种方式)
程序员
05-16 1401
其实上面两种方式已经大致实现懒加载，但是，它们都有一个缺点，就是一当发生滚动事件时，就发生了大量的循环和判断操作判断图片是否可视区里。这里就引入了一个叫 Intersection Observer 观察器接口，它是是浏览器原生提供的构造函数，使用它能省到大量的循环和判断。这个构造函数的作用是它能够观察可视窗口与目标元素产生的交叉区域。简单来说就是当用它观察我们的图片时，当图片出现或者消失在可视窗口，它都能知道并且会执行一个特殊的回调函数，我们就利用这个回调函数实现我们的操作。
【懒加载案例】（html,css,javascript）
m0_70684059的博客
03-26 136
【懒加载案例】（html,css,javascript）
js实现图片懒加载效果
10-19
主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript 实现懒加载效果
06-06
JavaScript 实现懒加载效果是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片或某些资源，从而提高页面加载速度并减少服务器带宽消耗。在这个主题中，我们将深入探讨JavaScript、HTML和CSS...
JS实现页面数据懒加载
11-20
4. 另外，还可以考虑结合Intersection Observer API，这是一个现代浏览器支持的API，用于监听元素何时进入或离开视口，可以更高效地实现懒加载，而且不需要依赖滚动事件。 总之，页面数据懒加载是一个有效的优化...
懒加载实现方式
wyzqhhhh的博客
04-11 523
首先将页面上的图片的 src 属性设为 loading.gif，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值，这样，就可以实现延迟加载。定义：延迟加载也称为惰性加载，懒加载，即在长网页中延迟加载图像。举个例子，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。
性能优化——懒加载
Rice_w的博客
01-31 1779
什么是懒加载呢？懒加载在我们的日常应用中非常常见。打开bilibili，首页会直接显示，我们一直往下滑动会发现下面的图片会有一个加载的过程，而不是直接出现的，这就是懒加载的效果。懒加载即延迟加载，也叫按需加载，对于一个很长的页面，优先加载可视区域的数据，可视区域之外的数据不会进行加载，其他部分等进入可视区域时再加载。毕竟如果图片很多，所有的图片都被加载出来，而用户只能看见可视区域的那一部分图片，这样就很浪费性能，使用懒加载会使得网页的加载速度很快，减少了服务器的负载，大大提高了用户体验。
div盒子内容的懒加载
04-09
通过查询数据库里面的数据，每一组数据放在一个div盒子里，拖动滚动条实现惰性加载，也称为懒加载。简单的事例，易学易懂。
html如何实现页面懒加载,浏览器HTML自带懒加载技术
weixin_31748999的博客
06-03 2170
对于目前的图浏。富混工就划这些本公的响示近览记的迹更片懒加载，我们一般采用的是通过第三方库或懒加载库来实现，但是该方式的显著问题就是，必须按插者几天网后供小来剑思含程个些结十在必页到别则气底。时效器按基高式近件浏篇天站来一痛又不想的序项方构年浏须面消顺序执行：1用能境战求道，重件开又是正易里是了些之框、加载初始的 HTML 响应内求圈分件圈浏第用代是水刚道。的它还容2、加载作一新求抖直微圈懒加载库...
移动端 懒加载、下拉刷新、上拉加载
karl982964的博客
05-18 1483
优势：提升性能 实现原理：图片是通过img的src属性，当对src赋值时，浏览器就会请求图片资源。 基于这个问题，我们可以利用标签的自定义属性(data-xxx)，来保存图片的路径，当我们需要加载图片 的时候，将data-xxx赋值给src就可以实现按需进入按需加载。 插件(lazyload) 网址：https://github.com/jieyou/lazyload 移动端懒加载案例 <!DOCTYPE html> <html lang="en"> <head> .
前端女娲补天 HTML（二）什么是懒加载，什么是预加载
LiXenon的博客
05-28 418
什么是懒加载 懒加载可以将页面上的图片src设置为空，真实路径放在data-original属性中，在图片进入可视区域后再将src设置为data-original的值。 具体实现 在DOM中获取所有懒加载图片元素。 window添加onscroll监听，遍历通知所有待加载图片，如果图片在视口内（图片离视口上边界距离image.getBoundingClientRect().top，TODO：判断元素在视口内文章链接 ）则将data-original中的路径赋给src。 懒加载的优点 提升用户体验，加快首屏渲
JavaScript中的懒加载——概念，作用，原理，实现步骤，以及3种原生js实现方式
王春燕的博客
04-20 5409
1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图）， 只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。 要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。 3.懒加载的
html页面图片延迟加载,实现图片懒加载的几种方法
weixin_36386044的博客
06-03 2527
懒加载就是延时加载，即当对象需要用到的时候再去加载。本文就来为大家介绍几种实现图片懒加载的方法，希望对大家有一定的帮助。懒加载，顾名思义，在当前网页，滑动页面到能看到图片的时候再加载图片故问题拆分成两个：如何判断图片出现在了当前视口 (即如何判断我们能够看到图片)如何控制图片的加载方案一如何判断图片出现在了当前视口clientTop，offsetTop，clientHeight 以及 scroll...
原生JS JavaScript实现懒加载效果
qq_39693468的博客
12-02 2182
我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。 懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。 话不多说，开始展示吧. ...
懒加载，预加载实现以及对比
webToy的博客
09-06 3246
本文介绍了懒加载，预加载的实现方法以及对比
el-tree 懒加载实现
09-02
通过这种方式可以实现el-tree组件的懒加载效果。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [Element-ui树形控件el-tree自定义增删改和局部刷新及懒...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值