Doubt with Iframe

Navigation
0

I would like a 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 arrives at that point? Is that this Iframe should load a banner. Thank you.

    
asked by anonymous 15.04.2018 / 00:16

1 answer

1

Yes, it is possible. Here are two ways to do it.

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 code above confusing, big etc. You can use the jQuery.appear library . This library works similarly 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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.6/jquery.appear.min.js"></script>

<iframe src="" data-src="/"></iframe>
    
15.04.2018 / 00:47
Connection to SQL database in C # Line break in HTML table