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