1

No momento tenho alguns banners que são carregados via ajax, e cada um faz uma requisição para carregar o html. Agora estou tentando dar uma otimizada nesses processos e resolvi fazer uma única requisição para carregar quantos banners estiverem disponíveis na página.

Basicamente eu tenho uma div com o tamanho do banner, e pelo javascript eu faço um loop em busca destes elementos e passo como argumento pelo ajax para fazer a requisição.

var tamanho = new Array
$('.banners').each(function( i )
{
    tamanho[ i ] = $(this).attr('tamanho')
})

$.ajax({ ... })

Até aqui funciona. Passo os tamanhos e recebo o resultado com um json tipo: {"json":{"tamanhoA":["banner"],"tamanhoB":["banner","banner"]}}. Nesse exemplo o tamanhoA é um único banner e tamanhoB são 2 banners.

O problema é a hora de exibir os banners nos devidos lugares. Para isso eu preciso repetir o loop igual ao de cima para pegar as divs e mais um loop no resultado para pegar a posição no array.


Queria saber se há alguma solução mais simples para esse caso sem precisar repetir todos esses loops? Esse json foi o mais simples que encontrei para fazer funcionar, mas posso adaptar o resultado diante de ideias.

1 Resposta 1

1

O que me ocorre para evitar 2 loops no DOM é criar um objeto com o elemento logo no primeiro loop. Mudei tambem o .each() para .map() pois prefiro assim.

Algo como:

var tamanho = $('.banners').map(function(i){
    return {
        tamanho: $(this).attr('tamanho'),
        elemento: this
    }
}).get();

$.ajax({ ... 
    complete: function(conteudos){
        $(conteudos).each(function(i){ tamanho[i].elemento.innerHTML = this;});
    }
});

Outra opção, igual à sua mas guardando os elementos no primeiro (e unico) .each() do DOM:

var tamanhos = [], elementos = [];
$('.banners').each(function(i){
        tamanhos[i] = $(this).attr('tamanho')
        elementos[i] = this
});

$.ajax({ ... 
    complete: function(conteudos){
        $(conteudos).each(function(i){ tamanho[i].elemento.innerHTML = this;});
    }
});
2
  • Parece ser o caminho certo, mas tem um porém que deve ser fácil resolver. Preciso passar como argumento pelo ajax os tamanhos dos banners que foram encontrados. No código que postei, eu vou acoplando um array e faco um count com php para ver quantos banners de cada serão retornados. Como adaptar nesse modelo? Commented 6/12/2014 às 11:41
  • @PapaCharlie nesse caso tem mesmo de ser parecido com a ideia que já tinhas... editei meio à pressa mas dou uma olhada de novo mais logo.
    – Sergio
    Commented 6/12/2014 às 12:53

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 .