图片懒加载的getBoundClientRect() Bug

最新推荐文章于 2024-06-25 16:36:22 发布
最新推荐文章于 2024-06-25 16:36:22 发布
阅读量660 收藏 1
点赞数 2
分类专栏： web前端技术 文章标签： html css javascript 图片懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z403877967/article/details/77249173
版权

最新自己做项目的时候有用到图片懒加载，我的思路是在视口滚动到图片上方一定距离时加载图片，于是采用了 getBoundClientRect 函数来获取图片的视口坐标，可是在实现过程中发现了一点小问题。

在没有加载图片的情况下获取 getBoundClientRect 的值是获取不到的，得到的对象返回值中所有的属性均为 0， img0的src并没有被赋值

这样的情况该如何去处理呢？因为图片懒加载的地方图片的宽高大致是固定的，如果高度不固定，可以采用瀑布流的做法，这里简单说一下固定时的处理办法，就是给图片加一个 span 标签，display: inline-block 之后设置他的宽高和图片大小差不多，用 span 标签先把位置占好，这样可以实时获取到 span 标签的 getBoundClientRect 值，从而动态加载图片 ——-2017/8/16

纪风夜影
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现图片懒加载之一：Element.getBoundingClientRect()
weixin_34037173的博客
03-09 443
实际项目开放中，特别是电商项目，由于有大量的图片加载必然会影响性能，所以实现图片的懒加载是非常有必要的。 实现图片懒加载的知识点 标签的data-属性 可视区域的监听 实现图片懒加载的原理 <img alt="loading..." data-src="images/1.jpg"> 当我们监听到图片进入可视区域后，就将data-src到值赋值给src属性 ...
getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式
wanghe1111_的博客
03-25 1523
getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式
getBoundingClientRect 方法详解
最新发布
qq_45660256的博客
06-25 88
js中getBoundingClientRect的作用详解
DOM中getBoundingClientRect()方法
weixin_54607676的博客
01-26 520
需要注意的是，getBoundingClientRect()返回的位置是相对于视口的坐标，而不是相对于文档的坐标。如果要获取相对于文档的坐标，需要加上。getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。该方法获取DOM元素的位置和大小；
微信小程序image动态赋值, 高度无法通过boundingClientRect获取高度的问题
彩虹
11-06 3463
数据请求到图片地址, 动态赋值给image时, 直接用boundingClientRect获取不到高度, 解决方法: <image src="{{htpSrc}}" bindload="imageLoad> imageLoad(){ // 710 css里设置的图片宽度 // this.data.windowWidth 手机屏幕宽度 let imgH = Math.floor(...
模块固顶和固底的一种实现方法—Api(Element.getBoundClientRect())
小狼驿站
08-31 1305
页面固顶和固底的一种实现方式 引：在 pc web 开发的过程中，经常会遇到一些模块固定的需求，接下来介绍一种固定的方式，通过 Element.getBoundClientRect() Api 来实现。 开发过程中需要获取页面元素的位置，可以参考 用Javascript获取页面元素的位置 这篇文章。 具体的效果 Demo，可以查看这个 git 仓库。 效果展示 看这里。
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
08-30
然而，在实际应用中可能会遇到一个bug，即首次加载图片正常，但当用户滚动页面加载更多数据时，新加载的图片无法正确执行懒加载，导致显示不出来。本文将详细解释这个问题的原因，并提供解决方案。 首先，我们来...
IE6图片加载的一个BUG解决方法
10-29
小图整合在一张大图里，然后在不同的CSS里调用同一张图片，以此来减少请求数，这是页面优化最常用的手段，但IE6会对页面里同一个图片，只要在不同的地方有引用到就会重新请求一次，需要加JS代码解决。
Android-Android主流图片加载引擎的动态替换方案
08-13
// 使用Glide加载图片的逻辑 } @Override public void clearMemoryCache() { // 清理Glide内存缓存的逻辑 } @Override public void clearDiskCache() { // 清理Glide磁盘缓存的逻辑 } } public class ...
IE6,IE7下js动态加载图片不显示错误
10-29
总的来说，IE6和IE7在处理动态加载图片时存在一个已知的底层bug，尤其是在与`<a>`标签结合使用时。通过避免使用`<a>`标签，或者确保正确阻止其默认行为，可以有效地解决这个问题。在实际开发中，考虑到这些旧版...
用getBoundClientRect检测浏览器滚动到底部事件
weixin_33735077的博客
05-14 253
很多时候比如下拉加载更多这种组件都需要检测滚动到底部事件。一般我们的做法是这个样子，先获取视窗高度window.innerHeight，然后获取整个html文档高度document.body.scrollHeight,再获取滚动条卷上去的距离，document.body.scrollTop,如果滚动卷上去的距离大于等于整个文档高度-视窗高...
[svg] svg(2) clientRect
aefg95955的博客
12-06 118
在html中可通过document操作元素 <html> <head> <title>Nested SVG</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1...
getBoundingClientRect()方法获取DOM元素的位置和大小
qq_31594665的博客
11-09 627
需要注意的是，getBoundingClientRect()返回的位置是相对于视口的坐标，而不是相对于文档的坐标。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
关于element select 报reading ‘getBoundingClientRect‘
qq_37236241的博客
12-30 859
select 报reading 'getBoundingClientRect'
理解getBoundClientRect()
赵天铭的博客
12-27 7736
概念 getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 用法 语法：这个方法没有参数。 rectObject = object.getBoundingClientRect(); object就是当前元素 返回值类型： rectObject.top：元素上边到视窗上边的距离; rectObjec...
js中getBoundingClientRect()方法详解
m0_59075169的博客
05-10 6414
js中getBoundingClientRect()方法详解
getBoundingClientRect函数获取视图位置的坑
YICONGITSME的博客
05-11 6175
最近在做一个功能，把新手引导的提示定位在申请的上方，申请的位置是会根据前面功能的不展示而向前移动的，所以位置是不固定的，因此新手引导的位置要根据申请元素的位置来定位。 我使用了getBoundingClientRect函数来获取申请dom元素距离视图的距离。 getTypeHighLightDom(item) { const dom = document.querySelector(item.selector); let domLocal; ...
vue 使用getBoundingClientRect() 获取元素位置 报错
热门推荐
weixin_43376571的博客
06-01 1万+
vue 使用getBoundingClientRect() 获取元素位置 报错Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of undefined 在mounted生命周期注册事件 mounted () { window.addEventListener('scroll', this.handleScroll, true) } 在methods里面监听使用 handleScroll () {
redirectTo会加载重新加载页面bug
07-16
你提到的redirectTo加载页面重新加载的bug可能是由于代码中的某些问题导致的。常见的问题包括使用错误的URL、缺少必要的重定向逻辑或使用了错误的重定向方法等。 为了更好地帮助你解决这个问题，我需要更多的详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值