safari onload iframe

Page: DOMContentLoaded, load, beforeunload, unload

The lifecycle of an HTML page has three important events:

• DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may not yet have loaded.
• load – not only HTML is loaded, but also all the external resources: images, styles etc.
• beforeunload/unload – the user is leaving the page.

Each event may be useful:

• DOMContentLoaded event – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.
• load event – external resources are loaded, so styles are applied, image sizes are known etc.
• beforeunload event – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.
• unload – the user almost left, but we still can initiate some operations, such as sending out statistics.

Let’s explore the details of these events.

DOMContentLoaded

The DOMContentLoaded event happens on the document object.

We must use addEventListener to catch it:

For instance:

In the example, the DOMContentLoaded handler runs when the document is loaded, so it can see all the elements, including <img> below.

But it doesn’t wait for the image to load. So alert shows zero sizes.

At first sight, the DOMContentLoaded event is very simple. The DOM tree is ready – here’s the event. There are few peculiarities though.

DOMContentLoaded and scripts

When the browser processes an HTML-document and comes across a <script> tag, it needs to execute before continuing building the DOM. That’s a precaution, as scripts may want to modify DOM, and even document.write into it, so DOMContentLoaded has to wait.

So DOMContentLoaded definitely happens after such scripts:

In the example above, we first see “Library loaded…”, and then “DOM ready!” (all scripts are executed).

There are two exceptions from this rule:

• Scripts with the async attribute, that we’ll cover a bit later , don’t block DOMContentLoaded .
• Scripts that are generated dynamically with document.createElement('script') and then added to the webpage also don’t block this event.

DOMContentLoaded and styles

External style sheets don’t affect DOM, so DOMContentLoaded does not wait for them.

But there’s a pitfall. If we have a script after the style, then that script must wait until the stylesheet loads:

The reason for this is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above. Naturally, it has to wait for styles to load.

As DOMContentLoaded waits for scripts, it now waits for styles before them as well.

Built-in browser autofill

Firefox, Chrome and Opera autofill forms on DOMContentLoaded .

For instance, if the page has a form with login and password, and the browser remembered the values, then on DOMContentLoaded it may try to autofill them (if approved by the user).

So if DOMContentLoaded is postponed by long-loading scripts, then autofill also awaits. You probably saw that on some sites (if you use browser autofill) – the login/password fields don’t get autofilled immediately, but there’s a delay till the page fully loads. That’s actually the delay until the DOMContentLoaded event.

window.onload

The load event on the window object triggers when the whole page is loaded including styles, images and other resources. This event is available via the onload property.

The example below correctly shows image sizes, because window.onload waits for all images:

window.onunload

When a visitor leaves the page, the unload event triggers on window . We can do something there that doesn’t involve a delay, like closing related popup windows.

The notable exception is sending analytics.

Let’s say we gather data about how the page is used: mouse clicks, scrolls, viewed page areas, and so on.

Naturally, unload event is when the user leaves us, and we’d like to save the data on our server.

There exists a special navigator.sendBeacon(url, data) method for such needs, described in the specification https://w3c.github.io/beacon/ .

It sends the data in background. The transition to another page is not delayed: the browser leaves the page, but still performs sendBeacon .

Here’s how to use it:

• The request is sent as POST.
• We can send not only a string, but also forms and other formats, as described in the chapter Fetch , but usually it’s a stringified object.
• The data is limited by 64kb.

When the sendBeacon request is finished, the browser probably has already left the document, so there’s no way to get server response (which is usually empty for analytics).

There’s also a keepalive flag for doing such “after-page-left” requests in fetch method for generic network requests. You can find more information in the chapter Fetch API .

If we want to cancel the transition to another page, we can’t do it here. But we can use another event – onbeforeunload .

window.onbeforeunload

If a visitor initiated navigation away from the page or tries to close the window, the beforeunload handler asks for additional confirmation.

If we cancel the event, the browser may ask the visitor if they are sure.

You can try it by running this code and then reloading the page:

For historical reasons, returning a non-empty string also counts as canceling the event. Some time ago browsers used to show it as a message, but as the modern specification says, they shouldn’t.

Here’s an example:

The behavior was changed, because some webmasters abused this event handler by showing misleading and annoying messages. So right now old browsers still may show it as a message, but aside of that – there’s no way to customize the message shown to the user.

That may sound weird, but most browsers ignore event.preventDefault() .

Which means, following code may not work:

Instead, in such handlers one should set event.returnValue to a string to get the result similar to the code above:

What happens if we set the DOMContentLoaded handler after the document is loaded?

Naturally, it never runs.

There are cases when we are not sure whether the document is ready or not. We’d like our function to execute when the DOM is loaded, be it now or later.

The document.readyState property tells us about the current loading state.

There are 3 possible values:

• "loading" – the document is loading.
• "interactive" – the document was fully read.
• "complete" – the document was fully read and all resources (like images) are loaded too.

So we can check document.readyState and setup a handler or execute the code immediately if it’s ready.

There’s also the readystatechange event that triggers when the state changes, so we can print all these states like this:

The readystatechange event is an alternative mechanics of tracking the document loading state, it appeared long ago. Nowadays, it is rarely used.

Let’s see the full events flow for the completeness.

Here’s a document with <iframe> , <img> and handlers that log events:

The working example is in the sandbox .

The typical output:

• [1] initial readyState:loading
• [2] readyState:interactive
• [2] DOMContentLoaded
• [3] iframe onload
• [4] img onload
• [4] readyState:complete
• [4] window onload

The numbers in square brackets denote the approximate time of when it happens. Events labeled with the same digit happen approximately at the same time (± a few ms).

• document.readyState becomes interactive right before DOMContentLoaded . These two things actually mean the same.
• document.readyState becomes complete when all resources ( iframe and img ) are loaded. Here we can see that it happens in about the same time as img.onload ( img is the last resource) and window.onload . Switching to complete state means the same as window.onload . The difference is that window.onload always works after all other load handlers.

Page load events:

• Script such as <script>...</script> or <script src="..."></script> block DOMContentLoaded, the browser waits for them to execute.
• Images and other resources may also still continue loading.
• The load event on window triggers when the page and all resources are loaded. We rarely use it, because there’s usually no need to wait for so long.
• The beforeunload event on window triggers when the user wants to leave the page. If we cancel the event, browser asks whether the user really wants to leave (e.g we have unsaved changes).
• The unload event on window triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it’s rarely used. We can send out a network request with navigator.sendBeacon .
• loading – the document is loading.
• interactive – the document is parsed, happens at about the same time as DOMContentLoaded , but before it.
• complete – the document and resources are loaded, happens at about the same time as window.onload , but before it.
• If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
• If you can't understand something in the article – please elaborate.
• To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

This event is not cancelable and does not bubble.

Note: All events named load will not propagate to Window , even with bubbles initialized to true . To catch load events on the window , that load event must be dispatched directly to the window .

Note: The load event that is dispatched when the main document has loaded is dispatched on the window , but has two mutated properties: target is document , and path is undefined . These two properties are mutated due to legacy conformance.

Use the event name in methods like addEventListener() , or set an event handler property.

A generic Event .

Log a message when the page is fully loaded:

The same, but using the onload event handler property:

Live example

Specifications, browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Document readyState API
• DOMContentLoaded
• readystatechange
• beforeunload

Prevent White Flash While Iframe Loads

If you Google around about this problem (at the time of this writing), you’ll find some incomplete answers and some other snippets advocating this bad practice:

The reason this is bad is that the CSS will hide the iframe no matter what and users with JavaScript turned off will never see that iframe. Now I’m not usually one to go to extreme lengths to cater to that crowd, but I’m all for using better solutions that do solve that issue when they are available.

The Solution

Thanks to Paul Irish and his Surefire DOM Element Insertion and Ryan Seddon and his article on inserting scoped style elements , we have this:

Just include that on any page (in the <head> ) with the white flash problem and it will be solved. Just note that we’re using window.onload here, so if your page also uses that somewhere, combine them.

How it Works

• It inserts some CSS on the page (right away) which makes all iframes invisible. You can’t see a white flash on an iframe that’s not there!
• When the window is done loading (which means iframes are done loading too), this CSS is removed, which makes the iframes visible again

Browsers Affected

At the time of this writing, I’m able to replicate the problem in Chrome 11 and Safari 5 (so essentially a WebKit issue). Current Firefox, Opera, and IE are fine.

What About… other stuff?

You can put the allowtransparency="true" attribute on the iframe. You can set the iframe’s background to transparent with CSS. You can make sure the background on the source document matches the background of the parent page. None of that stuff works. This works. Well… it works for users with JavaScript turned on, anyway. =)

What’s the “&shy;” all about?

Check out Ryan Seddon’s article: http://www.thecssninja.com/javascript/noscope

It’s all about IE stripping the style tag on insertion, preventing that, and doing it with a character with no bearing on rendering.

(that was a “shy” character… whatever that means)

Why not just have a <noscript> tag with a normal iframe, and add the iframe via javascript for everyone else?

It cleared my html, it should read:

Why not just have “noscript” a tag with a normal iframe, and add the iframe via javascript for everyone else?

I’m not sure that would help. When the JS inserts the iframe, it still loads and still white flash. Except you could probably do the same trick of hiding visibility until it loads. Seems kinda un-scaleable to have to put the markup for every iframe you want to insert into the JavaScript, kinda crossin’ the ol’ streams of content and behavior.

You would still have to use javascript so I think this solution is easier and it should work without editing the page, just “paste it and go”

Wonderful article!

One thing though: I’m sure you mean “You can’t see a white flash on an iframe that’s not there!”

Nice Article, but in general, the iFrame-technique is sooo old. You’ll better make clear to use other methods like dynamic content via PHP.

iFrames are here to stay for a while man. I think it’s a perfectly fine thing. YouTube videos are iframe embeds. Wufoo forms are iframe embeds. They are really great for hosted third party content where you need/want the control of those two things to be separate.

The iFrame Support from popular Webservices like YouTube, Facebook etc. does not mean that iFrames are a good way to handle external content. There are modern solutions like SOAP or CURL to handle this. (Sorry for my bad english, i’m from germany)

i have to agree with Chris. i work for a large corporation and we have a new, large SaaS product that is 100% reliant on iFrames.

So you think YouTube videos should provide their copy-and-paste embeddable video code as PHP with a CURL call?

iFrames are a perfect way to house outside content and as Chris said, with more and more large companies using them to embed there content (Youtube, Vimeo, Facebook, Twitter…) they are here to stay for a long time.

>> So you think YouTube videos should provide their copy-and-paste embeddable video code as PHP with a CURL call?

Yes, why not. Its also possible to share a JSON/XML/Whatever-Interface, which is easy callable via JavaScript.

I think that an iFrame makes it easy for people that are not in the design field or used to looking at a piece of code. For a large percentage of people its hard enough just to copy and paste. That could have been a reason for YouTube to switch to iFrame embed as it looks less complicated..

I implemented this flash prevention code on my site as soon as I saw it.

Thanks and great work Chris.

Does this also work if the iframe has been inserted with javascript? I.E. :

thnx it was very useful.i will use this in my site

This is actually a great way of preventing unwanted flashes of styling on things like skinned dropdowns and custom scrollbars. Happy to see this method catching on and being used for iframes as well!

“Just note that we’re using window.onload here, so if your page also uses that somewhere, combine them.” Why? I thought when you register multiple functions for an event, they stack and run in turn. Isn’t that so? BTW, did you know you can get the content of the iframe via script? All you need is this: getElementById('myiFrame').contentWindow and it will return the ‘window’ object of that iframe, now you can go like this:

Here’s a fiddle with two declarations of window.onload: http://jsfiddle.net/chriscoyier/gb7gt/ — you only get the second one. There may be a better way to handle that. I’m a noob at JavaScript.

For that second bit about accessing internal contents of iframe, that only works for same-domain iframes I’m pretty sure.

Chris is correct, ‘window.onload’ can only be attached to one function call. Using it twice means only the second call is fired. To do what you are suggesting Hassan, you would use an ‘init’ type function to run at ‘window.onload’ and then make multiple function calls to get the stacking behavior you’re describing.

Yeah totally, that’s why I said to watch out for that in the article and combine them. That’s the ideal way to do it, like you said, create an init function and call that, which contains anything you want to run on window.onload

the “proper” way is to use “attachEvent” for IE and “addEventListener” for everything else. That allows you to attach as many callbacks to an event as you want.

I managed to get rid of that white iframe flash with a site by simply using a background color with css for iframe element. Not suitable for image backgrounds but an option none the less on occassion

Thank you for such good and juicy article post :) This is definitely can be helpful when I’m dealing with Flash.

ref = document.getElementsByTagName(‘base’)[0] || document.getElementsByTagName(‘script’)[0]; WOW!!!

What about applying a class to the HTML or body tag, then removing it on page load. I use a similar technique (without removing the class) for JS-dependent styles:

JavaScript in head

CSS in Stylesheet:

Although the all-JS solution is easier to kinda copy-paste-done, and in the case of something like Wufoo form embeds (originally why I was messing with this), the only option.

What about when using this for a page with an iframe where every click on a menu-item loads different content in the same iframe. The page wont reload, only the iframe content. How to edit your script to prefent that kind of white flash?

Thanks, I’ve been looking for a solution to that problem for an hour! It doesn’t look good when its a payment gateway in the iframe, customers can loose confidence quite easily.

I am having an issue with this working in fancybox (www.fancybox.net). The fancybox uses an iframe so this works to a degree. The only problem is that once the page is loaded within the fancybox the css is not removed and the content remains hidden.

Is anyone familiar with fancybox enough to help me out? I’m new to javascript as well and I am sure it is a simple tweak that will fix this, but I am not sure where to start.

How can I add this code to my page? Do I need to insert within tags? Or tags??

I’m trying to have this work on an iframe embedde in a scene within a Hype ( http://www.tumultco.com/hype/ ) site. The page with the iFrame is accesed as a scene and therefore the page doesn’t exactly ‘load’. The iframe link is added within an inner HTML window.

Can I add this code elsewhere?

If not what other answer above best suits, perhaps adding custom CSS inside or alongside the iframe code?

Hi Chris. Thanks for helping. I pasted the code into the head as you say. The flash is gone but the video as well. Only hear audio. Why? Regards,

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iframe load event not firing in Chrome and Safari when src is 'about:blank' #6541

pirelenito commented Apr 18, 2016

• 👍 7 reactions

jimfb commented Apr 18, 2016

Sorry, something went wrong.

suprise commented Apr 6, 2017

vincnetas commented Sep 20, 2017

SmoooZ commented Nov 9, 2017

gaearon commented Jan 2, 2018

• 😄 5 reactions

ndugger commented Jan 29, 2018

• ❤️ 1 reaction

aweary commented Jan 29, 2018 • edited

• 👍 2 reactions

yanickrochon commented Jul 4, 2022 • edited

• 👍 4 reactions

TheJanitor337 commented Oct 26, 2022 • edited

No branches or pull requests

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

iframe not working with safari

I am using cross domain implementation for which on page of Site A, I load iframe with Site B.

Page inside iFrame calls rest apis of Site B and loads other pages from Site B depending upon responses.

Although while loading these responses I am getting errror as "Cookies are not turned on in your browser". This implementation works with all other browser except Safari 11.

Why Safari doesn't allow to store cookie for iFrame?

Posted on Apr 14, 2019 1:02 AM

Posted on Apr 14, 2019 7:57 AM

Try going to Safari/Preferences/Privacy and uncheck Prevent cross-site tracking.

Similar questions

• [Safari 14][SameSite]Cookie is blocked when SameSite is set to Lax Reproduce Steps: Use window.open to open a new tab in Safari 14 In the original tab, using JS to create a FORM in the new opened tab and submit to redirect to a specified URL The cookie info which's SameSite is set to Lax is lost in the new tab. The reason should be, Safari 14 consider this scenario is carrying over cookie info from one tab to another tab and then block the cookies with SameSite set to Lax. However, actually the FORM is created and submitted in the new tab, there is no CORS happens, Safari should not block the cookie. Safari with old version and other browsers all will not block the cookie in this scenarios, so we consider this as an issue of Safari 14, please help verify. Thanks. 1171 1
• My site doesn't work on Safari HI, I want to ask about my site regarding which is not work on Safari , but when i use another web browser then its work, please let me clear what should i do setting on safari to do work my site, hope i get better solution on this platform. Thanks, Alex [Edited by Moderator] 269 1
• Having to sign in in Google and accept the cookies everytime I open a new Tab in Safari Everytime I open a new Tab in safari I have to accept the cookies and do a login on google... everytime ..please help 1728 1

Loading page content

Page content loaded

Apr 14, 2019 7:57 AM in response to rhizo

Apr 14, 2019 10:50 PM in response to Eric Root

Thanks for your response.

Is 'Prevent Cross-site tracking' checked by default in safari?

I need to understand why Safari doesn't allow to store cookie for iFrame?

Apr 15, 2019 10:11 AM in response to rhizo

You are welcome. Prevent Cross-site tracking is on by default.

Working with iframes

Iframe setup for android and ios 15+ ​.

To allow Inline AR for Android and iOS 15+, you must include an allow parameter in your iframe with the following feature-policy directives :

NOTE: microphone is optional.

LEGACY METHOD: Supporting iOS versions prior to iOS 15 ​

The following is ONLY required for supporting Inline AR in iOS versions prior to iOS 15. Given the high adoption of iOS 15+, we NO LONGER recommend using this approach.

See the latest iOS adoption stats from Apple: https://developer.apple.com/support/app-store/

In addition to including the allow parameter with the correct feature-policy directives in your iframe as explained above, to support World Tracking projects on iOS versions prior to iOS 15, you must also include additional javascript on both the OUTER and INNER AR pages as explained below.

In these versions, Safari blocks deviceorientation and devicemotion event access from cross-origin iframes. To counter this, you must include two scripts in your project to ensure cross-compatibility with iOS when deploying World Tracking projects.

This is not required for Face Effects or Image Target projects (with disableWorldTracking set to true ).

When implemented correctly, this process enables the OUTER website to send motion events down to the INNER AR website, a requirement for World Tracking.

For the OUTER website ​

iframe.js must be included in the HEAD of the OUTER page via this script tag:

When starting AR, register the XRIFrame by iframe ID:

When stoppping AR, deregister the XRIFrame:

For the INNER website ​

iframe-inner.js must be included in the HEAD of your INNER AR website with this script tag:

By allowing the inner and outer windows to communicate, deviceorientation/devicemotion data can be shared.

See sample project at https://www.8thwall.com/8thwall/inline-ar

Outer Page ​

Inner page: aframe projects ​, inner page: non-aframe projects ​.

• iframe Setup for Android and iOS 15+
• LEGACY METHOD: Supporting iOS versions prior to iOS 15

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Performance

Lazy load images and <iframe> elements

Images and <iframe> elements often consume more bandwidth than other types of resources. In the case of <iframe> elements, a fair amount of extra processing time can be involved in loading and rendering the pages within them.

In the case of lazy loading images, deferring the loading of images that are outside of the initial viewport can be helpful in reducing bandwidth contention for more critical resources within the initial viewport. This can improve a page's Largest Contentful Paint (LCP) in some cases where network connections are poor, and that reallocated bandwidth can help LCP candidates load and paint faster.

Where <iframe> elements are concerned, a page's Interaction to Next Paint (INP) can be improved during startup by lazy loading them. This is because an <iframe> is a completely separate HTML document with its own subresources. While <iframe> elements can be run in a separate process, it's not uncommon for them to share a process with other threads, which can create conditions where pages become less responsive to user input.

Thus, deferring the loading of off-screen images and <iframe> elements is a technique worth pursuing, and requires fairly low effort for a reasonably good return in terms of performance. This module covers explains to lazy load these two types of elements for a faster and better user experience during the page's critical startup period.

Lazy load images with the loading attribute

The loading attribute can be added to <img> elements to tell browsers how they should be loaded:

• "eager" informs the browser that the image should be loaded immediately, even if it's outside the initial viewport. This is also the default value for the loading attribute.
• "lazy" defers loading an image until it's within a set distance from the visible viewport. This distance varies by browser, but is often set to be large enough that the image loads by the time the user scrolls to it.

It's also worth noting that if you're using the <picture> element, the loading attribute should still be applied to its child <img> element, not the <picture> element itself. This is because the <picture> element is a container that contains additional <source> elements pointing to different image candidates, and the candidate that the browser chooses is applied directly to its child <img> element.

Don't lazy load images that are in the initial viewport

You should only add loading="lazy" attribute to <img> elements that are positioned outside the initial viewport. However, it can be complex to know the precise position of an element relative within the viewport before the page is rendered. Different viewport sizes, aspect ratios, and devices have to be considered.

For example, a desktop viewport can be quite different from a viewport on a mobile phone as it renders more vertical space which may be able to fit images in the initial viewport that wouldn't appear in the initial viewport of a physically smaller device. Tablets used in portrait orientation also display a considerable amount of vertical space, perhaps even more than some desktop devices.

However, there are some cases in which it's fairly clear that you should avoid applying loading="lazy" . For example, you should definitely omit the loading="lazy" attribute from <img> elements in cases of hero images, or other image use cases where <img> elements are likely to appear above the fold, or near the top of the layout on any device. This is even more important for images that are likely to be LCP candidates .

Images that are lazy loaded need to wait for the browser to finish layout in order to know if the image's final position is within the viewport. This means that if an <img> element in the visible viewport has a loading="lazy" attribute, it's only requested after all CSS is downloaded, parsed, and applied to the page—as opposed to being fetched as soon as it is discovered by the preload scanner in the raw markup .

Since the loading attribute on the <img> element is supported on all major browsers there is no need to use JavaScript to lazy load images, as adding extra JavaScript to a page to provide capabilities the browser already provides affects other aspects of page performance, such as INP.

Image lazy loading demo

Lazy load <iframe> elements.

Lazy loading <iframe> elements until they are visible in the viewport can save significant data and improve the loading of critical resources that are required for the top-level page to load. Additionally, because <iframe> elements are essentially entire HTML documents loaded within a top-level document, they can include a significant number of subresources—particularly JavaScript—which can affect a page's INP considerably if the tasks within those frames requires significant processing time.

Third-party embeds are a common use case for <iframe> elements. For example, embedded video players or social media posts commonly use <iframe> elements, and they often require a significant number of subresources which can also result in bandwidth contention for the top-level page's resources. As an example, lazy loading a YouTube video's embed saves more than 500 KiB during the initial page load, while lazy loading the Facebook Like button plugin saves more than 200 KiB—most of which is JavaScript.

Either way, whenever you have an <iframe> below the fold on a page, you should strongly consider lazy loading it if it's not critical to load it up front, as doing so can significantly improve the user experience.

The loading attribute for <iframe> elements

The loading attribute on <iframe> elements is also supported in all major browsers. The values for the loading attribute and their behaviors are the same as with <img> elements that use the loading attribute:

• "eager" is the default value. It informs the browser to load the <iframe> element's HTML and its subresources immediately.
• "lazy" defers loading the <iframe> element's HTML and its subresources until it is within a predefined distance from the viewport.

Lazy loading iframes demo

Instead of loading an embed immediately during page load, you can load it on demand in response to a user interaction. This can be done by showing an image or another appropriate HTML element until the user interacts with it. Once the user interacts with the element, you can replace it with the third-party embed. This technique is known as a facade .

A common use case for facades is video embeds from third-party services where the embed may involve loading many additional and potentially expensive subresources—such as JavaScript—in addition to the video content itself. In such a case—unless there's a legitimate need for a video to autoplay—video embeds require the user to interact with them before playback by clicking the play button.

This is a prime opportunity to show a static image that is visually similar to the video embed and save significant bandwidth in the process. Once the user clicks on the image, it's then replaced by the actual <iframe> embed, which triggers the third-party <iframe> element's HTML and its subresources to begin downloading.

In addition to improving initial page load, another key upside is that if the user never plays the video, the resources required to deliver it are never downloaded. This is a good pattern, as it ensures the user only downloads what they actually want to, without making possibly faulty assumptions about the user's needs.

Chat widgets are is another excellent use case for the facade technique. Most chat widgets download significant amounts of JavaScript that can negatively affect page load and responsiveness to user input. As with loading anything up front, the cost is incurred at load time, but in the case of a chat widget, not every user never intends to interact with it.

With a facade on the other hand, it's possible to replace the third-party "Start Chat" button with a fake button. Once the user meaningfully interacts with it—such as holding a pointer over it for a reasonable period of time, or with a click—the actual, functional chat widget is slotted into place when the user needs it.

While it's certainly possible to build your own facades, there are open source options available for more popular third parties, such as lite-youtube-embed for YouTube videos, lite-vimeo-embed for Vimeo videos, and React Live Chat Loader for chat widgets.

JavaScript lazy loading libraries

If you need to lazy load <video> elements, <video> element poster images, images loaded by the CSS background-image property, or other unsupported elements, you can do so with a JavaScript-based lazy loading solution, such as lazysizes or yall.js , as lazy loading these types of resources is not a browser-level feature.

In particular, autoplaying and looping <video> elements without an audio track are a much more efficient alternative than using animated GIFs , which can often be several times larger than a video resource of equivalent visual quality. Even so, these videos can still be significant in terms of bandwidth, so lazy loading them is an additional optimization that can go a long way to reducing wasted bandwidth.

Most of these libraries work using the Intersection Observer API —and additionally the Mutation Observer API if a page's HTML changes after the initial load—to recognize when an element enters the user's viewport. If the image is visible—or approaching the viewport—then the JavaScript library replaces the non-standard attribute, (often data-src or a similar attribute), with the correct attribute, such as src .

Say you have a video that replaces an animated GIF, but you want to lazy load it with a JavaScript solution. This is possible with yall.js with the following markup pattern:

By default, yall.js observes all qualifying HTML elements with a class of "lazy" . Once yall.js is loaded and executed on the page, the video doesn't load until the user scrolls it into the viewport. At that point, the data-src attributes on the <video> element's child <source> elements are swapped out to src attributes, which sends a request to download the video and automatically begin playing it.

Test your knowledge

Which is the default value for the loading attribute for both <img> and <iframe> elements?

When are JavaScript-based lazy loading solutions reasonable to use?

When is a facade a useful technique?

Up next: Prefetching and prerendering

Now that you have a handle on lazy loading images and <iframe> elements, you're in a good position to ensure that pages can load more quickly while respecting the needs of your users. However, there are cases in which speculative loading of resources can be desirable. In the next module , learn about prefetching and prerendering, and how these techniques—when used carefully—can substantially speed up navigations to subsequent pages by loading them ahead of time.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-11-01 UTC.

sandbox attribute for iframes

Method of running external site pages with reduced privileges (e.g. no JavaScript) in iframes.

seamless attribute for iframes

The seamless attribute makes an iframe's contents actually part of a page, and adopts the styles from its hosting page. The attribute has been removed from both [the WHATWG](https://github.com/whatwg/html/issues/331) and [the W3C](https://github.com/w3c/html/pull/325) HTML5 specifications.

srcdoc attribute for iframes

Override the content specified in the `src` attribute (if present) with HTML content within the attribute.

Lazy loading via attribute for images & iframes

The `loading` attribute on images & iframes gives authors control over when the browser should start loading the resource.

htmliframeelement api

Htmliframeelement api: align, htmliframeelement api: csp, htmliframeelement api: name, htmliframeelement api: src, htmliframeelement api: width, html element: iframe, html element: iframe: align, html element: iframe: allow, html element: iframe: allowfullscreen, html element: iframe: allowpaymentrequest, html element: iframe: browsingtopics, html element: iframe: credentialless, html element: iframe: csp, html element: iframe: external protocol urls blocked, html element: iframe: frameborder, html element: iframe: height, html element: iframe: loading, html element: iframe: longdesc, html element: iframe: marginheight, html element: iframe: marginwidth, html element: iframe: name, html element: iframe: referrerpolicy, html element: iframe: referrerpolicy: no-referrer-when-downgrade, html element: iframe: referrerpolicy: origin-when-cross-origin, html element: iframe: referrerpolicy: unsafe-url, html element: iframe: sandbox, html element: iframe: sandbox: `sandbox="allow-downloads"`, html element: iframe: sandbox: `sandbox="allow-downloads-without-user-activation"`, html element: iframe: sandbox: `sandbox="allow-forms"`, html element: iframe: sandbox: `sandbox="allow-modals"`, html element: iframe: sandbox: `sandbox="allow-orientation-lock"`, html element: iframe: sandbox: `sandbox="allow-pointer-lock"`, html element: iframe: sandbox: `sandbox="allow-popups"`, html element: iframe: sandbox: `sandbox="allow-popups-to-escape-sandbox"`, html element: iframe: sandbox: `sandbox="allow-presentation"`, html element: iframe: sandbox: `sandbox="allow-same-origin"`, html element: iframe: sandbox: `sandbox="allow-scripts"`, html element: iframe: sandbox: `sandbox="allow-storage-access-by-user-activation"`, html element: iframe: sandbox: `sandbox="allow-top-navigation"`, html element: iframe: sandbox: `sandbox="allow-top-navigation-by-user-activation"`, html element: iframe: sandbox: `sandbox="allow-top-navigation-to-custom-protocols"`, html element: iframe: scrolling, html element: iframe: src, html element: iframe: srcdoc, html element: iframe: width.

Moscow Satellite City to Become First Classical Russian City Built From Scratch in Over 100 Years

THE 5 BEST Moscow Safaris

Safaris in moscow.

• Adrenaline & Extreme Tours
• Gear Rentals
• Nature & Wildlife Tours
• 5.0 of 5 bubbles
• District Central (TsAO)
• 3rd Transport Ring (TTK)
• District North-Eastern (SVAO)
• District Eastern (VAO)
• District South-Western (YuZAO)
• Lomonosovskiy
• Ostankinskiy
• Meshchanskiy
• Krasnoselskiy
• Maryina Roshcha (Jewish Quarter)
• Good for Couples
• Good for Kids
• Good for Big Groups
• Adventurous
• Budget-friendly
• Good for a Rainy Day
• Hidden Gems
• Honeymoon spot
• Good for Adrenaline Seekers
• Things to do ranked using Tripadvisor data including reviews, ratings, photos, and popularity.

1. Rybokhotsoyuz

2. Easy Russia Tour Guide

3. UTS GROUP

4. 365AltaiMongolia

5. #1 Russia -Tanzania | Zanzibar, Serengeti Safari & Kilimanjaro Agency | BURIGI CHATO SAFARIS CO LTD

6. Aviashop.Ru

7. Transsib Moscow

8. BASK TOUR

• Easy Russia Tour Guide
• #1 Russia -Tanzania | Zanzibar, Serengeti Safari & Kilimanjaro Agency | BURIGI CHATO SAFARIS CO LTD
• 365AltaiMongolia

We will keep fighting for all libraries - stand with us!

Internet Archive Audio

• This Just In
• Grateful Dead
• Old Time Radio
• 78 RPMs and Cylinder Recordings
• Audio Books & Poetry
• Computers, Technology and Science
• Music, Arts & Culture
• News & Public Affairs
• Spirituality & Religion
• Radio News Archive

• Flickr Commons
• Occupy Wall Street Flickr
• NASA Images
• Solar System Collection
• Ames Research Center

• All Software
• Old School Emulation
• MS-DOS Games
• Historical Software
• Classic PC Games
• Software Library
• Kodi Archive and Support File
• Vintage Software
• CD-ROM Software
• CD-ROM Software Library
• Software Sites
• Tucows Software Library
• Shareware CD-ROMs
• Software Capsules Compilation
• CD-ROM Images
• ZX Spectrum
• DOOM Level CD

• Smithsonian Libraries
• FEDLINK (US)
• Lincoln Collection
• American Libraries
• Canadian Libraries
• Universal Library
• Project Gutenberg
• Children's Library
• Biodiversity Heritage Library
• Books by Language
• Additional Collections

• Prelinger Archives
• Democracy Now!
• Occupy Wall Street
• TV NSA Clip Library
• Animation & Cartoons
• Arts & Music
• Computers & Technology
• Cultural & Academic Films
• Ephemeral Films
• Sports Videos
• Videogame Videos
• Youth Media

Search the history of over 866 billion web pages on the Internet.

Mobile Apps

• Wayback Machine (iOS)
• Wayback Machine (Android)

Browser Extensions

Archive-it subscription.

• Explore the Collections
• Build Collections

Save Page Now

Capture a web page as it appears now for use as a trusted citation in the future.

Please enter a valid web address

• Donate Donate icon An illustration of a heart shape

Speech by Alexei Navalny at Russian march 2011, together with Russian neo-Nazi leaders

Video item preview, share or embed this item, flag this item for.

• Graphic Violence
• Explicit Sexual Content
• Hate Speech
• Misinformation/Disinformation
• Marketing/Phishing/Advertising
• Misleading/Inaccurate/Missing Metadata

plus-circle Add Review comment Reviews

2 Favorites

DOWNLOAD OPTIONS

In collections.

Uploaded by Nome188 on February 8, 2021

SIMILAR ITEMS (based on metadata)