懒加载效果的实现

最新推荐文章于 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
    评论
专栏目录
关于微信小程序列表懒加载的解决方案
KroNaiCulture的博客
12-05 2010
我们在渲染一个展示数组，不能一次性的把所有的元素都展示出来，这样可能会导致用户性能体验下降，因此我们需要把所有的元素先保存在一个容器里，等用户需要（上滑）的时候再拿出来显示，为了更加高效的开发，我封装了方法，为了让封装方法得到的数据能够持久化，我使用了微信小程序缓存技术来保存数据。 在写一个保存所有展示数据的方法： 再写一个拿到数据的方法： 使用如下： 这样就完成了一个列表的懒加载操作。
微信小程序优化：如何实现图片懒加载？
Shids_的博客
10-06 7827
微信小程序优化：如何实现图片懒加载？
懒加载的实现
AnitaSun的博客
01-31 6378
一、什么是懒加载？ 懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载 二.为什么要懒加载？ 减少无用资源的加载 提升用户体验 防止加载过多图片而影响其它资源文件的加载 三.懒加载的实现原理？ 图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性
微信小程序图片懒加载如何实现？
最新发布
越陌度阡
05-27 829
微信小程序开发时，对于有图片的列表在加载时，为了用户体验更好，必需要对图片做懒加载。如下图所示，页面在打开时，图片会按需加载，这样用户体验没有那么生硬。以下将介绍图片懒加载的步骤：1.构建NPM：在小程序目录下初始化npm；2.安装插件：在项目根目录下执行以下命令，安装插件；3.使用插件：在要使用懒加载的页面引入组件......
小程序实现滚动加载（懒加载）
2303_76218115的博客
04-10 4383
小程序是一项很受欢迎的技术，随着其能力的不断增强，越来越多的人开始使用小程序来完成各种任务。当我面面临一个页面有非常多的数据时，该如何处理呢，显然一次性全部加载完，会非常消耗性能的，为了解决这些问题从而出现了一种叫滚动加载的数据处理方式，也被称为“无限滚动”或“懒加载”，它可以使你的页面在不刷新的情况下连续加载更多数据。在本文中，我们将讨论如何在小程序中实现滚动加载。
微信小程序实现图片懒加载的4种方案
笔记、经验、日常分享
03-22 2977
可以创建一个自定义组件，将图片的 URL 和是否显示图片的状态封装在组件内部，然后在页面中使用自定义组件来实现图片的懒加载。创建一个自定义组件，例如lazy-image。在自定义组件的 WXML 文件中，使用 image 组件来显示图片，并使用 wx:if 条件渲染来判断图片是否需要显示。
js实现图片懒加载效果
10-19
主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript 实现懒加载效果
06-06
JavaScript 实现懒加载效果是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片或某些资源，从而提高页面加载速度并减少服务器带宽消耗。在这个主题中，我们将深入探讨JavaScript、HTML和CSS...
JS实现页面数据懒加载
11-20
4. 另外，还可以考虑结合Intersection Observer API，这是一个现代浏览器支持的API，用于监听元素何时进入或离开视口，可以更高效地实现懒加载，而且不需要依赖滚动事件。 总之，页面数据懒加载是一个有效的优化...
JS实现懒加载以及加载进度实现 - 手把手从页面到核心详解
q145p152的博客
06-23 1929
前端懒加载技术对于现在来说已经是屡见不鲜，那我们需要知道在什么场景下需要用到懒加载，比如某宝，某东等首页展示，在其浏览商品的时候是可以无限滚动加载的，以及大量的图文展示，也需要用到懒加载，其目的就是为了减轻浏览器渲染的压力从而提升用户体验，按量渲染，而不是嗖的一下把压力全部给到浏览器。
java懒加载实现
花生日记
04-27 3600
懒加载的作用主要是为了解决程序运行时会发生内存泄漏的问题，具体有以下几点： 1)当一个类不再使用时，如果它是通过加载的方式来实现，那么这个类中的静态变量就会被释放，因为静态变量是不需要加载的；在 Java中，有三种方式可以实现懒加载： 1、通过对象头来实现 2、通过继承类库来实现 首先我们需要声明一个对象，这个对象在编译期不会被加载，但是在运行期时，会被编译器加载到内存中。当运行时，如果类中的所有方法都已经加载完毕，这个类就会被加载到内存中，如果这个类没有被加载，那么就不会被加载。如果有的话就将它清除。
实现懒加载的四种方式
qq_45472813的博客
09-05 5806
个人封装常用方法工具包： https://github.com/lihai-boop/tool 文章已收录: https://github.com/lihai-boop/Blog 1. 滚动距离计算 offsetTop,scrollTop,clientHeight原生API获取距离像素计算 offsetTop:获取当前元素与其父级元素顶部内边距的距离 scrollTop:当前元素滚动超出的高度 clientHeight:当前元素的可视高度 "灵魂画手"绘图 img元素offsetTop - 父级元素s..
分享一些懒加载图片与高级懒加载技巧，提升网站速度和用户体验
前端达人
06-11 931
开篇懒加载图片是加快网站加载速度最简单的方法之一，因为最基本的懒加载只需要一行代码。然而，你还可以使用一些高级技巧，使你的懒加载效果看起来像上面的图片一样，具有模糊的占位符和从占位符到完整图片的平滑过渡效果。在本文中，我将介绍关于懒加载的一切知识，以及如何创建这种高级懒加载效果。什么是懒加载？懒加载是一种延迟加载资源的技术。在图片的情况下，这意味着直到用户滚动到屏幕上可见图片的位置，该图片才会被下...
vue项目实现路由按需加载(路由懒加载)的3种方式
2301_79099607的博客
03-18 1645
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时vue异步组件es提案的import()webpack的require,ensure()1 . vue异步组件技术 ==== 异步加载。
懒加载实现方式
wyzqhhhh的博客
04-11 523
首先将页面上的图片的 src 属性设为 loading.gif，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值，这样，就可以实现延迟加载。定义：延迟加载也称为惰性加载，懒加载，即在长网页中延迟加载图像。举个例子，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。
性能优化——懒加载
Rice_w的博客
01-31 1785
什么是懒加载呢？懒加载在我们的日常应用中非常常见。打开bilibili，首页会直接显示，我们一直往下滑动会发现下面的图片会有一个加载的过程，而不是直接出现的，这就是懒加载的效果。懒加载即延迟加载，也叫按需加载，对于一个很长的页面，优先加载可视区域的数据，可视区域之外的数据不会进行加载，其他部分等进入可视区域时再加载。毕竟如果图片很多，所有的图片都被加载出来，而用户只能看见可视区域的那一部分图片，这样就很浪费性能，使用懒加载会使得网页的加载速度很快，减少了服务器的负载，大大提高了用户体验。
前端Vue篇之Vue-Router 的懒加载如何实现、如何定义动态路由？如何获取传过来的动态参数？
星辰迷上大海的博客
03-05 1621
懒加载：在Vue Router中，使用懒加载可以通过import函数和Webpack的代码分割功能来实现。这意味着只有在需要时才会加载相应的组件，而不是一次性加载所有组件。
移动端 懒加载、下拉刷新、上拉加载
karl982964的博客
05-18 1487
优势：提升性能 实现原理：图片是通过img的src属性，当对src赋值时，浏览器就会请求图片资源。 基于这个问题，我们可以利用标签的自定义属性(data-xxx)，来保存图片的路径，当我们需要加载图片 的时候，将data-xxx赋值给src就可以实现按需进入按需加载。 插件(lazyload) 网址：https://github.com/jieyou/lazyload 移动端懒加载案例 <!DOCTYPE html> <html lang="en"> <head> .
el-tree 懒加载实现
09-02
el-tree的懒加载实现可以通过使用lazy属性和load方法结合来实现。首先，在el-tree组件中设置lazy属性为true，如lazy，表示开启懒加载功能。然后，通过设置load属性为一个方法，用于加载子树数据。load方法会在展开某个节点时被调用，然后根据节点的信息来获取子节点的数据，并将子节点的数据设置到其父节点的数据下，从而形成懒加载的效果。 具体实现的步骤如下： 1. 在el-tree组件中设置lazy属性为true，示例代码如下： <el-tree lazy :load="loadNode" ... ></el-tree> 2. 编写loadNode方法，该方法用于加载子树数据。根据节点的level属性来判断是父节点还是子节点。对于父节点，直接将父级数据放入resolve中，示例代码如下： async loadNode(node, resolve) { if (node.level === 0) { resolve(this.knowledgeDatas); } ... } 3. 对于子节点，根据节点信息发送请求获取子节点的数据，并将数据设置给其父节点。具体步骤如下： - 构建请求参数，根据需要传递的参数进行配置。 - 发送请求获取子节点的数据，可以使用异步请求的方式获取数据。 - 将子节点的数据进行处理，将数据格式转换为符合el-tree要求的格式。 - 使用updateKeyChildren方法将子节点的数据设置给其父节点，将子节点数据设置到父节点的children属性中。 - 将数据传递给resolve方法，使得el-tree组件能够渲染出子节点数据。 综上所述，el-tree懒加载的实现主要包括设置lazy属性为true，编写loadNode方法来加载子树数据，并在loadNode方法中根据节点信息进行获取子节点数据的处理和设置。通过这种方式可以实现el-tree组件的懒加载效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作](https://download.csdn.net/download/weixin_38542223/13125838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-tree懒加载](https://blog.csdn.net/m0_57311133/article/details/123844869)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值