0

Gostaria de uma ajuda com algo aparentemente é simples. Alguém sabe me dizer se é possível carregar o conteúdo de um Iframe somente quando ele estiver disponível para visualização no browser? Ou seja, quando o usuário chegar naquele ponto? É que esse Iframe deverá carregar um banner. Obrigado.

1 Resposta 1

1

É possível sim. Abaixo mostro duas formas de fazer.

Exemplo #1 - Comentado:

{
  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>


Exemplo #2 - Com jQuery:

Caso você ache o código acima confuso, grande etc. Você pode utilizar a biblioteca jQuery.appear. Essa biblioteca funciona de forma semelhante ao exemplo #1, porém usa jQuery para deixar mais fácil para o desenvolvedor.

/**
 * 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>

5
  • Grande Valdeir. Você é demais. Muito obrigado. Funcionou 100%. Seu eu pudesse apenas dar uma implementação mais precisa ao código te agradeceria muito. Na verdade, eu gostaria de indicar o final de uma DIV especifica para que o Iframe surgisse. Consegue me ajudar mais um pouco? 14/04/2018 às 23:15
  • Seria isso jsfiddle.net/ocungunw/4 ? 15/04/2018 às 0:10
  • Olá Valdeir. Vou fazer uns testes mas aparentemente é isso sim.Muito obrigado mais uma vez. 15/04/2018 às 21:38
  • @LuizAralanLeite Caso tenha ajudado-o, não esqueça de marcar como resolvido. :) 15/04/2018 às 21:38
  • Excelente. Funcionou 100%. Obrigado. 24/04/2018 às 23:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .