How to open a page (document) when everything is rendered by the browser?

Asked

Viewed 118 times

-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index2</title>
    <style>
        
        iframe {
            width: 300px;
            height: 210px;
        }

    </style>
</head>
<body>

    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

In the above example the document contains several embedded videos within the tags iframe of Youtube the problem is that when the document is executed in Browser the iframe is loaded one by one and ends up letting the user see these elements being loaded. What I would like is that in this delay in which the Browser has not rendered all the iframe, to show some image or anything else and then to show the iframe. If possible I would like to know what is called this technique that programmers use. I don’t know if this technique is fair on the client side or the server side, but if it is one of the two all help is welcome, welcome!

Note: I recommend you open this top code in a document on your own computer, I think the stack overflow does not allow incorporation of certain files and an example of a website that uses this technique is the MEGA.

html

2 answers

1

Use the event window.onload. This event is called when everything has been loaded.

You can create a fixed div with a "Loading..." message in the center of the screen and in the CSS place visibility: hidden in iframes. When the page opens it will display the message and when all iframes are loaded it will change the visibility of iframes to visible.

CSS

iframe {
   width: 300px;
   height: 210px;
   visibility: hidden;
}

#loader{
   display: flex;
   width: 100vw;
   height: 100vh;
   justify-content: center;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
}

HTML

<div id="loader">
   Carregando...
</div>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

JS

<script>
window.onload = function(){

      document.getElementById("loader").outerHTML = '';
      var iframes = document.getElementsByTagName("iframe");

      for(var i of iframes) i.style.visibility = "visible";

}
</script>

  • In my browser, didn’t work! no console fires each shipment of a iframe an alert with the message [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

  • I made a change to the reply. This message that appears in the browser console is generated by the Youtube code.

0


You can use the document.readyState to be able to check if the page has the status as complete that is if the content of the page has been fully loaded.

Example

We, want to display a background with a text of Loading while the site files are being uploaded, when loaded we want to remove the background along with the text of Loading, thus displaying the <iframe> that are incorporating the videos from YouTube.

  1. First, create a <div> with id="loading" and with content Loading:

    <div id="loading">Loading</div>

  2. Then add some styles to our #loading, this will serve to occupy 100% of the screen, stay centered, etc.

    #loading {
    width: 100%;
    height: 100%;
    background: black;
    color: #ff7b00;
    font-family: arial;
    font-size: 30px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

  3. Enseguida, for the #loading 100% height it is necessary for your father to be 100% too, so add something like this:

    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

  4. IS important, you do when the content burst out of the body that he stays hidden:

    body {
    overflow: hidden;
}

  5. Finally, we can work with a code Javascript very simple:

    let loading = document.querySelector("#loading");
let body = document.body;

let checkLoading = setInterval(() => {
    if (document.readyState === 'complete') {
        clearInterval(checkLoading);

        body.removeChild(loading);
        body.style.overflow = "auto";
    }
}, 100);

Well, basically the top code will check every 100 millisecond if the content was loaded, if the content is loaded it will remove that <div id="loading"> we create and will add to body the property overflow with the value auto to scroll back the page.

Upshot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index2</title>
    <style>
        
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            overflow: hidden;
        }

        iframe {
            width: 300px;
            height: 210px;
        }

        #loading {
            width: 100%;
            height: 100%;
            background: black;
            color: #ff7b00;
            font-family: arial;
            font-size: 30px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    </style>
</head>
<body>

    <div id="loading">Loading</div>

    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="967" height="544" src="https://www.youtube.com/embed/ZWVVzA-Yq8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <script>
        let loading = document.querySelector("#loading");
        let body = document.body;

        let checkLoading = setInterval(() => {
            if (document.readyState === 'complete') {
                clearInterval(checkLoading);
                
                body.removeChild(loading);
                body.style.overflow = "auto";
            }
        }, 100);
    </script>

</body>
</html>

Note: Like you said the stackoverflow does not allow incorporation of third party content.

Some sites that might help you: varvy, MDN Web Docs.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.