Intersection Observer rootMargin 在 x 轴上未按预期工作

2024-03-19

我正在尝试使用交集观察器 API 为一个侧面项目实现图像延迟加载,我面临的问题是,无论我如何调整 x 轴的 rootMargin (例如 '0px 300px 0px 0px),交叉点似乎只发生在视口上。

预期:在进入视口之前相交 300px 时加载图像。

结果:图像仅在与 viewport 相交时加载,而 rootMargin 似乎无法在水平水平上工作。

这是一个例子:

```https://codepen.io/daniel-yeh/pen/WNEzJWe?editors=1111```

真的希望有人能帮忙解决这个问题,完全不知道......


遇到了同样的问题,这个解决方案对我有用:https://stackoverflow.com/a/58625634/18598778 https://stackoverflow.com/a/58625634/18598778

基本上,您必须将根元素指定为目标的直接祖先。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Intersection Observer rootMargin 在 x 轴上未按预期工作 的相关文章

随机推荐

  • 如何确定两个相似的乐队名称是否代表同一乐队?

    我目前正在开展一个项目 该项目要求我将我们的乐队和场地数据库与许多外部服务相匹配 基本上我正在寻找一些关于确定两个名字是否相同的最佳方法的方向 例如 我们的数据库场地名称 The Pig and Whistle 服务1 猪和口哨 服务2 猪
  • 线性过滤能否用于 MSAA 纹理到非 MSAA 纹理的 FBO blit?

    我有两个 2D 纹理 第一个是 MSAA 纹理 使用的目标为GL TEXTURE 2D MULTISAMPLE 第二个非 MSAA 纹理使用的目标为GL TEXTURE 2D 根据 OpenGL 的ARB texture multisamp
  • 如何跟踪 iOS 设备上 3G/wifi 的网络流量? [复制]

    这个问题在这里已经有答案了 我想了解一个应用程序如何DataMan http itunes apple com us app dataman real time data usage id393282873 mt 8工作 即使它在后台运行
  • 在 MSBuild 中,我可以在元数据项上使用 String.Replace 函数吗?

    在 MSBuild v4 中 可以使用函数 例如string replace on 特性 但是我怎样才能使用函数Metadata 我想使用string replace功能如下
  • 如何从 rake 文件运行 ruby​​ 类?

    我想运行一个 ruby 类样本 rake file 考虑myruby rb是一个红宝石文件 我想从以下位置运行这个样本 rake like ruby myruby rb 添加一个示例脚本来添加 tobias 在这里所说的内容 样本内容myr
  • 数组的渲染 json 问题

    我有来自我的服务器的这个数组 当我使用 put 时返回如下 formatted total price Acirc pound 66 00 formatted total price Acirc pound 128 00 formatted
  • 按钮点击声音

    这就是我想做的 我有大约 30 个按钮 我希望当点击每个按钮时 它会播放不同的mp3文件 像这样http www soundjig com pages soundfx beeps html http www soundjig com pag
  • 如何从 TypeScript 中的通用部分构建目标对象?

    我在用 电子邮件受保护 cdn cgi l email protection 我有一个目标对象 interface MyTarget a string b string c string d string 我想使用泛型创建部分对象的多个转换
  • jquery-confirm 对话框中的 jQuery UI 日期选择器

    我正在使用下面链接中的 jquery confirm 脚本 它能够在对话框中包含表单字段 您可以通过单击下面链接中的 按提示操作 蓝色按钮来查看此内容 我已经设置了表单 单个字段 但我希望这个输入是一个日期选择器 并且我不知道应该在哪里放置
  • Django Q 查询 & 在同一字段上?

    这是我的模型 class Event models Model user models ForeignKey User blank True null True db index True name models CharField max
  • 下拉菜单中的 jvectormaps,NS_ERROR_FAILURE:

    我的 jvector 地图位于下拉菜单中 它在 safari opera 和 chrome 中运行良好 但会损坏 没有地图 和错误消息 NS ERROR FAILURE 2 0 2 min js 第 700 行 return this no
  • LinkedList不能序列化?

    这是我的课程 http pastebin com 3dc5Vb1t http pastebin com 3dc5Vb1t 当我尝试跑步时 BookStore b new BookStore b LoadFromXML Server MapP
  • 如何替换 Tkinter 应用程序中的图标?

    我在 Windows 10 上使用 Python 3 5 0 并且想要替换它 要更改图标 您应该使用iconbitmap or wm iconbitmap我的印象是您想要将其更改为的文件必须是 ico 文件 import tkinter a
  • C#:GPS跟踪系统[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 如何在 C net 中构建带有移动设备 带 GPS 的 GPS 跟踪系统 场景是 通过支持 GPS 的手机跟踪用户 服务工程师 这里没
  • 保持鼠兔 BlockingConnection 存活而不禁用心跳

    我正在使用 pika 0 10 0 和 python 2 7 版本开发 RabbitMQ 消费者 在我的消费者客户端中 我有一个根据输入消息运行一段时间的进程 时间可能从 3 到 40 分钟不等 我不想禁用心跳 相反 我正在寻找一些回滚机制
  • Ruby on Rails - 简单表单自动完成关联搜索

    我在基本任务管理应用程序中有一个表单 允许将任务分配给用户 任务属于用户 我为此使用简单表格 目前 该关联以典型方式填充 带有用户下拉列表 如下所示 但是 随着用户数量的增长 我希望将其更改为自动完成表单字段以查找用户 我尝试过遵循Rail
  • 使用原生SQL查询时如何指定数据类型?

    我正在使用休眠 我已经编写了本机 SQL 查询 我想指定其中一列的数据类型 如下所示 sqlQuery addScalar NAME STRING 我正在查询 5 列并且ID是其中的一栏 但如果我使用addScalar 它不返回所有列 只返
  • 用于 BLE 的 BluezV5.42 DBUS C API?

    我开发了 BLE 应用程序openwrt using BLUEZV5 30 我能够通过提取源代码来创建应用程序gatttool and hcitool 我还添加了这些工具提供的更多功能 例如阅读rssi 不过 我已经升级了我的bluez堆叠
  • JSON.net - 字段可以是 string 或 List

    我有一种情况JSON从一个返回REST service 返回电影对象列表 所有对象都包含大量信息 其中有几个字段REST 服务结果根据可用信息而变化 举个例子 电影总是有一些屏幕截图 图像 演员和导演 根据所讨论的电影 可能有一张或多张图像
  • Intersection Observer rootMargin 在 x 轴上未按预期工作

    我正在尝试使用交集观察器 API 为一个侧面项目实现图像延迟加载 我面临的问题是 无论我如何调整 x 轴的 rootMargin 例如 0px 300px 0px 0px 交叉点似乎只发生在视口上 预期 在进入视口之前相交 300px 时加