Show load indicator when loading iframe

It's always a good habit to let users know what happened . This article demonstrates a common situation , We are loading iframe Display the load indicator .

This is ours iframe：

<iframe id="frame"></iframe>

Mark

Load indicators and iframe Is organized as follows ：

<div class="container">
    <!-- The loading indicator -->
    <div class="loading" id="loading">Loading</div>

    <!-- The iframe -->
    <iframe id="frame" style="opacity: 0"></iframe>
</div>

first ,iframe Will be hidden by setting the opacity to zero . On the other hand , The load indicator can be displayed in iframe Center and top of .

We can put some CSS Styles are applied to containers and loading elements ：

.container {
    /* To position the loading */
    position: relative;
}

.loading {
    /* Absolute position */
    left: 0;
    position: absolute;
    top: 0;

    /* Take full size */
    height: 100%;
    width: 100%;

    /* Center */
    align-items: center;
    display: flex;
    justify-content: center;
}

Handling events

The layout looks good now . By default , The user will only see the load indicator . load iframe after , We will hide Load indicator

// Query the elements
const iframeEle = document.getElementById('iframe');
const loadingEle = document.getElementById('loading');

iframeEle.addEventListener('load', function () {
    // Hide the loading indicator
    loadingEle.style.display = 'none';

    // Bring the iframe back
    iframeEle.style.opacity = 1;
});