Search code examples
javascriptjqueryperformanceloade-commerce

How does jQuery .load() affect the site with many .load();

Imagine that I have a lot of product cards on an e-commerce site. then I want to retrieve information from the product page regarding stock status.

So I loop through each product card then I load the information from the product page with load();

How will this affect the site's performance?

Will each load (); for each product card to be like a page view?

So if I have 50 product cards, will it be like 50 page views?

$('.article-list-wrapper .articlelist-item').each(function() {
 if ($(this).find('.sg-stock-availability-plp').length < 1) {
  $(this)
   .find('.offer')
   .after("<div class='sg-stock-availability-plp'></div>");

  var sg_product_href = $(this)
   .find('.articlelist-item-image-wrapper')
   .attr('href');

  $(this)
   .find('.sg-stock-availability-plp')
   .load(sg_product_href + ' .article-stock-availability');
 }
});
Solution

  • How will this affect the site's performance?

    Badly. It won't scale well at all.

    Will each load() for each product card to be like a page view?

    Yes

    If I have 50 product cards, will it be like 50 page views?

    Yes.

    I'd strongly suggest you load an entire page of products at a time, or alternatively only load product information when the user interacts with the product by clicking or hovering it, depending on your UI requirements.