scroll infinito fim do scroll infinito

[Claudio r Martinez 0]

Olá amigos, tenho um script de scrool infinito que peguei na internet que funciona perfeito no site.

O que eu preciso é que quando não tiver mais itens a carregar o javascript pare de solicitar e não mostre o texto e a imagem de carregando.

cada fez que chega ao final da pagina, aparece carregando e a imagem de carregamento, até ai tudo bem, mas quando acaba o conteudo o javascript fica mostrando o "carregando e a imagem", além de ficar solicitando na pagina que fornece o conteudo.

Alguem pode me ajudar, pois não manjo de javascript.

abaixo o javascript que uso:

 

        //variavel para controle de registros retornados
        var pagina = 0;
        //function carrega
        function carrega(){
            $('.loading').html("<p><img src='/inc/images/loader2.gif' width='173' height='123'/><br /><span style='font-weight: bold; font-style: italic; font-size: 24px;'>Carregando anúncios...</span></p><p>&nbsp;</p><p>&nbsp;</p>").fadeIn('fast');
            $.ajax({
                type: "POST",
                url: "/inc/sql-home.asp",
                data: "page="+pagina,//variavel passada via post 
                cache: false,
                success: function(html){
                    $(".content").append(html);//mostra resultado na div content
                },
                error:function(html){
                    $('.content').html("erro...").fadeIn('fast');
                }
            });
        };
        //chama minha funcao ao carregar a pagina
        $(document).ready(function(){
            carrega();
        });
        //funcao de controle do scroll da pagina, na qual ela chega ao fim  acionada chamando
        //minha function carrega novamente para trazer mais dados dinamicamente
        $(window).scroll(function(){
            
            if($(window).scrollTop() + $(window).height() >= $(document).height()-500){
                pagina += 1;
                carrega();
            };
        });
 

[Omar~ 87]

Basta que limite a quantidade de vezes que pode executar a partir de uma variável fazendo a comparação antes de chamar a funçao carrega:

var maximo = 3; // Quer dizer que só irá funcionar 3 vezes
var pagina = 0;

if (pagina < maximo) {
  carrega();
}

 

Porém como você está usando jQuery mesmo que não carregue o o scroll será ativo mas não fará nada. Entretanto isso sobrecarrega a execução da página que irá fazer algo que não precisaria fazer.

[Claudio r Martinez 0]

Em 09/11/2019 at 22:35, Omar~ disse:

Basta que limite a quantidade de vezes que pode executar a partir de uma variável fazendo a comparação antes de chamar a funçao carrega:

var maximo = 3; // Quer dizer que só irá funcionar 3 vezes
var pagina = 0;

if (pagina < maximo) {
  carrega();
}

 

Porém como você está usando jQuery mesmo que não carregue o o scroll será ativo mas não fará nada. Entretanto isso sobrecarrega a execução da página que irá fazer algo que não precisaria fazer.

 

Obrigado pela resposta amigo.

Quebrei um pouco a cabeça e dei mais umas pesquisadas e consegui arrumar o que eu precisava.

Ficou assim: 

 

        //variavel para controle de registros retornados
        var pagina = 0;
        var fim = 'nao'
        //function carrega
        function carrega(){
            $('.loading').html("<img src='/inc/images/loader2.gif'/>").fadeIn('fast');
            $.ajax({
                type: "POST",
                url: "/inc/sql-home.asp",
                data: "page="+pagina,//variavel passada via post 
                cache: false,
                success: function(html){
                    $(".content").append(html);//mostra resultado na div content
                    if (html.length == 0) { // se não recebe nada
                        fim = 'sim'
                    };
                    
                },
                error:function(html){
                    $('.content').html("erro...").fadeIn('fast');
                }
            });
        };
        //chama minha funcao ao carregar a pagina
        $(document).ready(function(){
            carrega();
        });
        //funcao de controle do scroll da pagina, na qual ela chega ao fim  acionada chamando
        //minha function carrega novamente para trazer mais dados dinamicamente
        $(window).scroll(function(){
            
            if($(window).scrollTop() + $(window).height() >= $(document).height()-500 && fim == 'nao'){
                pagina += 1;
                carrega();
                } else {
                $('.loading').html("").fadeIn('fast');
            };
        });