js实现懒加载

于 2023-02-21 16:37:49 发布
阅读量58 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59905053/article/details/129095301
版权

html：

js：

1. 获取img元素列表

2. 给window添加滑动监听事件，如图:

图片懒加载

肥肥胖胖恍恍惚惚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现页面数据懒加载
11-20
页面数据懒加载。Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。 以下为目前实现的方法： <!-- page lazyloading --> [removed] $(function(){ // 设置布尔值用于判断是否该DIV到达过可视区域 var scrollflaga = true; // 监听滚
JavaScript中的懒加载——概念，作用，原理，实现步骤，以及3种原生js实现方式
王春燕的博客
04-20 5409
1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图）， 只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。 要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。 3.懒加载的
JavaScript实现懒加载
weixin_51422386的博客
12-05 3044
项目性能优化
js实现一个长页面中的图片懒加载即滚动到其位置才加载
lost_wen的博客
03-16 7990
Document img { display: block; margin-bottom: 50px; width: 400px; height: 400px; }
javascript 实现懒加载效果
06-06
JavaScript 实现懒加载效果是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片或某些资源，从而提高页面加载速度并减少服务器带宽消耗。在这个主题中，我们将深入探讨JavaScript、HTML和CSS...
原生js实现懒加载.zip
03-08
在本文中，我们将深入探讨如何使用原生JavaScript实现懒加载技术，特别关注如何模拟美团外卖应用中的滚动加载效果。懒加载是一种优化网页性能的技术，它只在用户滚动到页面可见区域时才加载图像或其他资源，从而减少...
html 懒加载,JS懒加载实现
weixin_39559079的博客
06-07 462
懒加载是什么就是图片延迟加载，很多图片并不需要页面载入的时候就加载，当用户滑到该视图的时候再加载图片，避免打开网页时加载过多的资源。当页面一次性要加载很多资源的时候往往要用到懒加载图片加载原理img标签有一个src属性，当src不为空时，浏览器就会根据这个值发请求懒加载实现思路首先将src属性临时保存在temp-src上，等到想要加载该图片时，再将temp-src赋值给src代码实现首先一个简单的...
JavaScript：原生JS实现图片懒加载
郭宇的博客
06-12 1万+
懒加载 用户体验 优化
JS简单实现滚动自动加载新内容（懒加载）
YooHoeh的博客
12-12 7946
加载源 // 这里存后台发来的数据 var galleryList = [ { src: &amp;quot;./images/1.jpeg&amp;quot;, desc: &amp;quot;11111&amp;quot; }, { src: &amp;quot;./images/1.jpeg&amp;quot;, desc: &amp;quot;11111&amp;quot;
原生 JS 懒加载简单实现
kayron的博客
11-27 2750
懒加载优势: (1) 节省网络资源 – 一次性加载所有资源很慢 (2) 对用户体验 – 节省流量, 使用友好 (3) 对服务器而言 – 减轻负载压力 懒加载原理: 只显示可视区域的图片给用户 功能实现 (1) 图片标签默认是占位图, 图片真正的地址在自定义属性里 (2) 滚动时把可是区域的占位图替换成自定义属性里的图片路径 需要用到知识点: (1) 图片距离顶部的
js原生实现高性能懒加载(分步解析)
weixin_40821790的博客
12-07 1万+
小弟不才,自己做了一个简单的懒加载,为了节约 window.onscroll的次数 ,提高性能, 设计了函数节流和函数防抖两种模式 , 后面想到更好的方法会更新,也请各位朋友多多指点!! :D 废话不多说,直接亮代码~~1.简单懒加载:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docu
js实现图片懒加载原理
热门推荐
tomorrownan的博客
05-24 12万+
有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。 为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。...
原生JS实现懒加载(Lazy Load)
Lea
07-16 1万+
window.innerHeight：浏览器可视区域高度； document.body.scrollTop || document.documentElement.scrollTop：浏览器滚动条滚过高度； img.offsetTop：元素距文档顶部的高度；
用JavaScript实现懒加载
最新发布
05-17
懒加载（Lazy Loading）是一种优化网页性能的技术，它可以在页面加载完毕后，延迟加载一些不是必要的资源，比如图片、视频等，从而减少页面的加载时间，提高用户的体验。 下面是用 JavaScript 实现懒加载的简单示例： 首先，我们需要在 HTML 中将需要延迟加载的资源（比如图片）的 `src` 属性替换为 `data-src` 属性，如下所示： ```html <img data-src="path/to/image.jpg"> ``` 接下来，我们需要编写 JavaScript 代码来实现懒加载。具体实现步骤如下： 1. 获取所有需要延迟加载的元素 2. 监听滚动事件，当元素出现在视口内时，动态加载资源 3. 将 `data-src` 属性的值赋给 `src` 属性 下面是完整的 JavaScript 代码： ```javascript window.addEventListener('DOMContentLoaded', function() { const lazyImages = document.querySelectorAll('img[data-src]'); const windowHeight = window.innerHeight; function lazyLoad() { lazyImages.forEach(image => { const imageTop = image.getBoundingClientRect().top; if (imageTop < windowHeight) { image.src = image.dataset.src; image.removeAttribute('data-src'); } }); } window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); }); ``` 在这段代码中，我们首先使用 `document.querySelectorAll` 获取所有带有 `data-src` 属性的图片元素。接着，我们获取浏览器窗口的高度，并定义 `lazyLoad` 函数，用于实现懒加载。在 `lazyLoad` 函数中，我们遍历所有需要延迟加载的图片元素，并使用 `getBoundingClientRect()` 方法获取元素的位置信息。如果元素的顶部位置小于浏览器窗口的高度，就将 `data-src` 属性的值赋给 `src` 属性，并移除 `data-src` 属性。 最后，我们监听 `scroll` 和 `resize` 事件，当页面滚动或窗口大小发生变化时，重新执行 `lazyLoad` 函数，以确保所有需要延迟加载的元素都能被正确加载。 注意：以上代码仅为示例，实际应用中需要根据具体情况进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值