Doubt with Iframe

Question

I’d like a little help with something apparently simple. Can anyone tell me if it is possible to load the contents of an Iframe only when it is available for viewing in the browser? That is, when the user reaches that point? Is that this Iframe should load a banner. Thanks.

Answer 1

It is possible yes. Below I show two ways to do.

Example #1 - Commented:

{
  let pageTop,
      pageBottom,
      
      elementTop,
      elementBottom

  let iframe = document.querySelector("iframe")

  window.addEventListener("scroll", () => {

    /* Captura o número de pixel (visível ou não) da "janela" na posição Y */
    pageTop = window.pageYOffset
    
    /* Soma o valor acima com o tamanho da tela visível */
    pageBottom = pageTop + window.innerHeight

    /**
     * Soma o tamanho de um elemento e sua posição relativa ao viewport +
     * número de pixel (visível ou não) da "janela" na posição Y
     */
    elementTop = (iframe.getBoundingClientRect().top + window.pageYOffset)
    
    /* Soma o valora cima com a altura do elemento */
    elementBottom = (elementTop + iframe.height)

    /**
     * Realiza as condições para checar se o scroll "chegou" até o elemento
     * Verifica se o atributo "src" está vazio
     */
    if ((elementTop <= pageBottom) && (elementBottom >= pageTop) && iframe.getAttribute("src") === "") {
      console.log("Carregou");
      
      /**
       * Captura o valor do atributo "data-src" e adiciona em "src"
       * forçando o carregamento
       */
      iframe.setAttribute("src",  iframe.getAttribute("data-src") );
    }

  })
}

iframe {
  margin: 1000px 0;
}

<iframe src="" data-src="/"></iframe>

---

Example #2 - With jQuery:

If you find the above code confusing, large etc. You can use the library jQuery.appear. This library works in a similar way to example #1, but uses jQuery to make it easier for the developer.

/**
 * Informa o elemento que desejamos
 * verificar se está ou não visível
 */
$('iframe').appear();

/**
 * Adiciona o evento "appear" para
 * detectar os elementos que estarão
 * visíveis
 */
$('iframe').on('appear', function() {
  if ( $(this).attr("src") == "" ) {
    $(this).attr("src", $(this).attr("data-src"))
  }
});

iframe {
  margin: 1000px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.6/jquery.appear.min.js"></script>

<iframe src="" data-src="/"></iframe>