# 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: front-end, javascript, optimization
- Canonical: https://blog-preview.imfrank.dev/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? Comente \o/

## Posts relacionados

- [Carregando webfonts apenas nos breakpoints de tablet e desktop](https://blog-preview.imfrank.dev/pt-br/blog/usando-fonte-customizada-apenas-em-desktop/) (2015-07-04): Técnica simples para otimizar seu site/projeto. Venha descobrir!

---

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://blog-preview.imfrank.dev/llms.txt) e o [sitemap](https://blog-preview.imfrank.dev/sitemap.xml).