Ho riscontrato problemi con la velocità di caricamento utilizzando più collegamenti jQuery su un paio di migliaia di elementi e input, esiste un modo più efficiente per farlo?jQuery bind efficiency
Il sito ha la possibilità di passare da un elenco di prodotti tramite chiamate Ajax, la pagina non può essere aggiornata. Alcune liste hanno 10 articoli, circa 100, alcuni nel 2000. La questione della velocità si verifica quando inizio a sfogliare le liste; ogni volta che viene caricato l'elenco di articoli 2000+, il sistema si trascina per circa 10 secondi.
Prima di ricostruire l'elenco, ho impostato l'html dell'elemento di destinazione su "" e lo sbiadimento dei due collegamenti di seguito. Sono sicuro che ha qualcosa a che fare con tutte le chiamate parent, next e child che sto facendo nei callback. Ogni aiuto è molto apprezzato.
ciclo 2500 volte
<ul>
<li><input type="text" class="product-code" /></li>
<li>PROD-CODE</li>
...
<li>PRICE</li>
</ul>
anello fine
$('li.product-code').bind('click', function(event){
selector = '#p-'+ $(this).prev('li').children('input').attr('lm');
$(selector).val(
($(selector).val() == '' ? 1 : (parseFloat($(selector).val()) + 1))
);
Remote.Cart.lastProduct = selector;
Remote.Cart.Products.Push(
Remote.Cart.customerKey,
{
code : $(this).prev('li').children('input').attr('code'),
title : $(this).next('li').html(),
quantity : $('#p-'+ $(this).prev('li').children('input').attr('lm')).val(),
price : $(this).prev('li').children('input').attr('price'),
weight : $(this).prev('li').children('input').attr('weight'),
taxable : $(this).prev('li').children('input').attr('taxable'),
productId : $(this).prev('li').children('input').attr('productId'),
links : $(this).prev('li').children('input').attr('productLinks')
},
'#p-'+ $(this).prev('li').children('input').attr('lm'),
false,
(parseFloat($(selector).val()) - 1)
);
return false;
});
$('input.product-qty').bind('keyup', function(){
Remote.Cart.lastProduct = '#p-'+ $(this).attr('lm');
Remote.Cart.Products.Push(
Remote.Cart.customerKey,
{
code : $(this).attr('code') ,
title : $(this).parent().next('li').next('li').html(),
quantity : $(this).val(),
price : $(this).attr('price'),
weight : $(this).attr('weight'),
taxable : $(this).attr('taxable'),
productId : $(this).attr('productId'),
links : $(this).attr('productLinks')
},
'#p-'+ $(this).attr('lm'),
false,
previousValue
);
});
Il live è il vincitore! Ora il mio unico blocco di velocità è un plug-in senza clic con il tasto destro del mouse che ho scaricato. Senza le associazioni la creazione della lista è stata istantanea, ora è di circa mezzo secondo. Con lo script no-right-click si blocca, ma ciò è dovuto ai vincoli che immagino. Molte grazie! – clownshoes
@chelfers - Quale plug-in senza clic destro usi? Questo dovrebbe anche essere abbastanza facile da passare a '.live()' e ottenere tutto il tuo codice istantaneo ... se non lo hai già fatto, rispondi qui e darò un'occhiata. –
'delegate()' è sicuramente la strada da percorrere. È molto più ottimale delle alternative quando hai migliaia di elementi di quali eventi desideri catturare. L'unica avvertenza è che richiede jQuery 1.4. –