# Carregando o Disqus ao chegar no fim da página

> O Disqus é um sistema poderoso de comentários utilizado por milhões de sites na internet.

- Author: Franklin Javier
- Published: 2015-07-06
- Language: Português (Brasil)
- Tags: frontend, performance
- Canonical: https://franklinjavier.com/pt-br/blog/carregando-disqus-ao-chegar-no-fim-da-pagina/

O Disqus é um sistema poderoso de comentários utilizado por milhões de sites na internet. 

Aqui mesmo no blog eu uso esse sistema e é muito fácil de instalar. 
Basta criar uma conta e colar um trecho de código no seu site. 
Por padrão, o Disqus é carregado de forma assíncrona, porém ao acessar a página já é carregado. 

Como uma pessoa fanática por otimização, sou um pouco impaciente em certas circunstâncias. 
Não existe coisa pior que acessar um sistema ou site e esperar uma eternidade para ter uma primeira resposta, 
não é mesmo? ._.

E como poderíamos melhorar isso? Fácil: requisitando apenas quando necessário, ou seja, nesse caso quando o usuário chegar ao fim da página. 

O código fornecido por eles é esse aqui:

```javascript
var disqus_shortname = 'franklinjavier';

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
```

Com isso, criamos um evento ```onscroll``` e verificamos quando o usuário *scrollar* até o fim da página. 
Perceba que no meu caso, adicionei um *offset* de 500px para poder carregar um pouco antes de chegar ao fim da página.

Enfim, o código completo:

```javascript
var disqus_shortname = 'franklinjavier',
  disqus_url = "http://franklinjavier.com/";

(function() {

  'use strict';

  function load() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

    // Remove o evento
    window.onscroll = function() {};
  }

  window.onscroll = function() {
    // Ao chegar próximo ao fim da página, carrega o Disqus
    if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 500)) {
      load();
    }
  };

}());
```

Fácil, não? Me conta no [X](https://x.com/franklinjavier) \o/

## Posts relacionados

- [Troquei Tailwind por StyleX. O site não ficou mais rápido.](https://franklinjavier.com/pt-br/blog/stylex-nao-deixou-o-site-mais-rapido/) (2026-08-25): Migrei um site com nota 100 no PageSpeed para StyleX, medi o resultado e descobri que o ganho real estava em outro lugar.
- [O que performance web realmente significa em e-commerce](https://franklinjavier.com/pt-br/blog/performance-web-ecommerce/) (2024-03-20): Tiramos uma loja de 15s para 3s em 3G lento e a conversão subiu 45%. O que medir, para onde o tempo realmente vai, e por que os maiores ganhos costumam ser remoções.
- [Entrevista de Arquitetura Frontend](https://franklinjavier.com/pt-br/blog/entrevista-arquitetura-frontend/) (2023-02-26): Perguntas e respostas comuns em entrevistas sobre arquitetura frontend, performance, segurança e habilidades interpessoais

---

Todas as páginas deste site também estão disponíveis em markdown: solicite qualquer URL com o header `Accept: text/markdown`. Veja o [llms.txt](https://franklinjavier.com/llms.txt) e o [sitemap](https://franklinjavier.com/sitemap.xml).