必须启用 JavaScript

只有启用 JavaScript 时才会延迟加载,与属性的值无关。

这是一种反跟踪措施,因为如果用户代理在禁用脚本的情况下支持懒加载,网站仍能通过在页面标记中策略性地放置 iframe 来跟踪用户会话中的大致滚动位置:服务器能够根据请求 iframe 的数量和时间来判断用户的浏览进度。

加载事件的时间

当文档已被完全处理时,将触发 load 事件。

即使 iframe 位于可视视口并在页面加载时被请求,懒加载的 iframe 也不会影响 load 事件的时机。只有当文档中所有立即加载的 iframe 都被请求后,才能触发 load 事件。

以下示例展示了如何定义一个懒加载的 iframe,然后将其附加到文档中的 <div> 。只有当 iframe 即将变得可见时,才会加载 iframe。

js
// 在 iframe 中定义懒加载
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
iframe.width = 320;
iframe.height = 240;
iframe.loading = "lazy";
// 添加到类名为 frameDiv 的 div 元素中
const frameDiv = document.querySelector("div.frameDiv");
frameDiv.appendChild(iframe);
        Specification
  • featurePolicy
  • height
  • loading
  • name
  • referrerPolicy
  • sandbox
  • src
  • srcdoc
  • width
  • 实例方法
    1. getSVGDocument()
  • 继承
    1. HTMLElement
    2. Element
    3. Node
    4. EventTarget
  • HTML DOM 的相关页面
    1. BeforeUnloadEvent
    2. DOMStringMap
    3. ErrorEvent
    4. HTMLAnchorElement
    5. HTMLAreaElement
    6. HTMLAudioElement
    7. HTMLBRElement
    8. HTMLBaseElement
    9. HTMLBodyElement
    10. HTMLButtonElement
    11. HTMLCanvasElement
    12. HTMLDListElement
    13. HTMLDataElement
    14. HTMLDataListElement
    15. HTMLDialogElement
    16. HTMLDivElement
    17. HTMLDocument
    18. HTMLElement
    19. HTMLEmbedElement
    20. HTMLFieldSetElement
    21. HTMLFormControlsCollection
    22. HTMLFormElement
    23. HTMLFrameSetElement
    24. HTMLHRElement
    25. HTMLHeadElement
    26. HTMLHeadingElement
    27. HTMLHtmlElement
    28. HTMLImageElement
    29. HTMLInputElement
    30. HTMLLIElement
    31. HTMLLabelElement
    32. HTMLLegendElement
    33. HTMLLinkElement
    34. HTMLMapElement
    35. HTMLMediaElement
    36. HTMLMenuElement
    37. HTMLMetaElement
    38. HTMLMeterElement
    39. HTMLModElement
    40. HTMLOListElement
    41. HTMLObjectElement
    42. HTMLOptGroupElement
    43. HTMLOptionElement
    44. HTMLOptionsCollection
    45. HTMLOutputElement
    46. HTMLParagraphElement
    47. HTMLPictureElement
    48. HTMLPreElement
    49. HTMLProgressElement
    50. HTMLQuoteElement
    51. HTMLScriptElement
    52. HTMLSelectElement
    53. HTMLSourceElement
    54. HTMLSpanElement
    55. HTMLStyleElement
    56. HTMLTableCaptionElement
    57. HTMLTableCellElement
    58. HTMLTableColElement
    59. HTMLTableElement
    60. HTMLTableRowElement
    61. HTMLTableSectionElement
    62. HTMLTemplateElement
    63. HTMLTextAreaElement
    64. HTMLTimeElement
    65. HTMLTitleElement
    66. HTMLTrackElement
    67. HTMLUListElement
    68. HTMLUnknownElement
    69. HTMLVideoElement
    70. HashChangeEvent
    71. History
    72. ImageData
    73. Location
    74. MessageChannel
    75. MessageEvent
    76. MessagePort
    77. Navigator
    78. PageRevealEvent
    79. PageSwapEvent
    80. PageTransitionEvent
    81. Plugin
    82. PluginArray
    83. PromiseRejectionEvent
    84. RadioNodeList
    85. UserActivation
    86. ValidityState
    87. Window
    88. WorkletGlobalScope
  • 指南
    1. 在 JavaScript 中通过 queueMicrotask() 使用微任务
    2. 深入:微任务与 Javascript 运行时环境
  •