图片懒加载之IntersectionObserver对象

最新推荐文章于 2024-05-18 16:08:18 发布
最新推荐文章于 2024-05-18 16:08:18 发布
阅读量504 收藏
点赞数
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43314255/article/details/126322021
版权

图片懒加载之IntersectionObserver对象,本文只介绍使用IntersectionObserver进行图片懒加载的方式
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .title {
    height: 100px;
    background-color: rgba(0, 0, 0, 0.473);
    margin-bottom: 10px;
  }
  .pic {
    text-align: center;
    margin: 0 auto;
  }
  .pic img {
      width: 500px;
      height:300px
    
  }
</style>
<body>
  <div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
  </div>
  <div class="pic">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
    <img class="lazyImg" src="./images/1.png" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662972901&t=fe96bdda518b65041a48c1698d396808" alt="">
  </div>
  <div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
  </div>
  
</body>
<script>
  (function() {
    function callback(entries) {
    //entries 是一个数组,进入视野的元素的数组
      entries.forEach(k => {
        if (k.isIntersecting) {
        //遍历绑定去除我们便签上的属性 放到src属性里面
        let real_src = k.target.getAttribute('data-src')
        k.target.setAttribute('src',real_src)
        //最后把这个眼踩掉就行了
        imgObserve.unobserve(k.target)
      }
      })
      
    }
    let imgs = document.getElementsByClassName('lazyImg')
    // 获取浏览器对象 
    //IntersectionObserver
    //callback是当被监听元素的可见性变化时，触发的回调函数
	//options是一个配置参数，可选，有默认的属性值
    let imgObserve = new IntersectionObserver(callback)
    for (let i = 0; i < imgs.length; i++) {
      //调用observe方法给元素加上监听,就是插个眼先,一但这个元素进入浏览器的视野就会回调		    callback函数
      imgObserve.observe(imgs[i])
    }
  })();
 
</script>
</html>

好了,这就是基本的图片懒加载了

三七安
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
IntersectionObserver实现图片懒加载的示例
08-29
IntersectionObserver实现图片懒加载的示例 IntersectionObserver是Web API中的一种新的API，用于观察目标元素与视窗或其他元素之间的交叉状态。通过使用IntersectionObserver，我们可以实现在页面滚动时，异步加载...
图片懒加载文件jquery插件库EasyLazyload
10-11
图片懒加载文件jquery插件库EasyLazyload
IntersectionObserver简单介绍及使用，监听元素是否在可视区域内
05-22 1969
IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。IntersectionObserver支持两个参数：callback是当被监听元素的可见性变化时，触发的回调函数options是一个配置参数，可选，有默认的属性值。
如何使用 IntersectionObserver API 来实现数据的懒加载？（以 Vue3 为例）
weixin_42650595的博客
01-05 2895
使用 IntersectionObserver 来实现数据的懒加载
IntersectionObserver一分钟学会，超级简单
最新发布
Zbz00720的博客
05-18 544
给dom元添加进入动画的核心逻辑就是：通过css给指定元素添加过渡属性，然后使用观察对象监听每个元素，给默认在视口中的元素做最终值的处理，给不在视口中的元素做初始值的处理。当图片进入视口以后，使用data-url的图片地址，替换src的图片地址。rootMargin 属性是规定视口的外延值，相当于扩大了视口的范围，用于提早触发观察者回调函数。当threshold的值是1，表示：当被监听元素完全进入视图在触发观察者的回调函数；root属性的值可以是一个祖先级对象，这时，主要的是针对局部的滚动效果。
JS使用IntersectionObserver进行图片懒加载
qq_51741730的博客
09-04 371
js使用IntersectionObserver进行图片懒加载
IntersectionObserver实现图片懒加载
qq_45228255的博客
04-08 212
IntersectionObserver实现图片懒加载
懒加载优化方案——IntersectionObserver
weixin_41770018的博客
08-07 98
在加载图片列表时候，如果不做任何处理，浏览器会创建所有img标签并去加载每一张图片，当图片过大，或者过多的时候，页面将超级消耗资源，这时候，懒加载就起到了一个很重要的作用(如果有运维支持，当这篇文章不存在)，只展示用户看到的(屏幕内的)，所以官网提供了一个原生的APIIntersectionObserver接口； 从属于Intersection Observer API)提供了一种异步观...
原生JS实现图片懒加载之页面性能优化
10-17
图片懒加载是一种有效的优化策略，它能够显著提升用户体验，尤其是在处理大量图片的页面时。本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. ...
谈谈IntersectionObserver懒加载的具体使用
10-16
使用IntersectionObserver懒加载的好处在于，它可以显著减少页面初始化时的加载负担，特别是对于图片、视频等大容量资源，用户滚动到相应位置时才加载，从而提高页面加载速度，节省带宽。同时，这种策略也有利于提高...
彻底弄懂IntersectionObserver
qq_37028216的博客
02-26 517
最近vue3在开发一个页面懒加载组件，使用到的核心API就是IntersectionObserver，虽然之前也了解用过，但是还是不够理解，本文就用于记录自己的学习理解过程。
用IntersectionObserver实现图片懒加载
cvvvvvvvvvv的博客
12-08 451
懒加载的基本思路 当dom元素进入可视区域时，才去加载它 利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载 格式： var dom = dom元素 // 实例化一个观察者 // 它的参数1是一个回调：当被观察的目标进入视口/离开视口就会调用 var observer = new IntersectionObserver((entries)=>{ console.log(entries[0].isInte
useIntersectionObserver 实现 图片懒加载效果
g1804583265的博客
03-11 291
// 注册全局指令实现图片懒加载效果 import { useIntersectionObserver } from '@vueuse/core' import defaltImg from '@/assets/images/200.png' // 图片未加载完成时展示的默认图片 export default { install(app) { app.directive('imgLazy', { mounted(el, binding) { // 设置默认展示的照片 .
Vue3实现图片懒加载及自定义懒加载指令
~~~
08-12 7345
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
vue3.0中用自定义指令实现图片懒加载
^_^
07-19 1159
本章技术点 Vue官方工具库(仅限vue3.0使用)中的useIntersectionObserver vue.use插件的使用 vue3.0自定义指令 使用场景 ① 每一张图片都要进行懒加载操作，在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态 浏览器一般最多支持并行发送的请求数6个左右 避免和重要请求竞争 ② 监听图片是否成功进入到视口 如果进来了我们才正式发送请求 (操作src就可以) ③ 迷惑点 我们请求回来的数据给数据做...
vue项目中图片懒加载的两种实现方式
Joey_Davoid的博客
08-16 213
如自定义指令为v-lazy，函数名就必须要写成vLazy，自定义指令为v-lazy-load，函数名就必须要写成vLazyLoad。（1） 在App.vue中，和上面的写法本质都是通过IntersectionObserver构造函数实现的，代码如下。（0） 给需要添加图片懒加载效果的图片加上 v-lazy=“图片路径”，不用写src属性了。（0） 给需要添加图片懒加载效果的图片加上 v-lazy=“图片路径”，不用写src属性了。注：这种写法要注意声明的函数名称，自定义指令要写成。
前端懒加载的N种玩法分享(技术进阶)
趣谈前端
02-16 1355
今日寄语: 生活嘛, 慢慢来, 你又不差. 前言性能优化系列文章又更新啦，这次主要是和小伙伴们来介绍一下懒加载以及相关的玩法。懒加载是前端性能优化中很重要的一环，可以有效地降低首页的白屏时间，并且可以广泛地应用到小伙伴们的项目中。提到懒加载，前端的小伙伴们通常的第一想法就是图片的懒加载啦。哈哈哈，其实懒加载并不止局限于图片懒加载，它也是有很多的应用场景。别着急，咱们一个一个的来介绍。im...
【187】◀▶ 编辑博客的文本格式 & 装饰
weixin_34268843的博客
12-11 227
参考：博客园页面设置 参考：共享一下我的自定义CSS博客皮肤（2012.3） 一、文字周围带框框 插入一个代码，要折叠式，如下图所示： 史蒂夫 示例 选中“示例”，将其拷贝，然后黏贴，就有如下的效果： 示 例 接下来就可以进行自由编辑了！ 直接通过添加代码然后选中“行内代码”即可示例 ...
IntersectionObserver图片懒加载及用户体验优化
Wind_waving的博客
03-24 481
前提 熟知的图片懒加载的方式是使用getBoundingClientRect函数判断是否在可视区域内，但是调用这个函数会引起回流，影响浏览器性能。可替代的方式是使用IntersectionObserver对象，使用方式参考IntersectionObserver API 使用教程——阮一峰 关于回流，参考前端优化总结 正题 先看效果： 模拟图片加载堵塞的情况，图片到达可视区域2s后才加载出图片，在图片加载出来之前鼠标移动到图片上时可显示图片描述文字 上代码： //html: <!-- 模
IntersectionObserver图片懒加载代码
03-24
以下是IntersectionObserver图片懒加载的代码示例： HTML： ``` <img class="lazy" data-src="image.jpg" alt="Image"> ``` JavaScript： ``` const lazyImages = document.querySelectorAll('.lazy'); const lazyLoad = target => { const io = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.getAttribute('data-src'); img.setAttribute('src', src); img.classList.remove('lazy'); observer.disconnect(); } }); }); io.observe(target); }; lazyImages.forEach(lazyLoad); ``` 该代码使用了IntersectionObserver API来检测图片是否在视口中可见，如果可见则加载图片。这种方法可以提高页面加载速度和性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值