I developed the one eCommerce site using laravel 7 Now I facing an issue is when I click the category page that time it's loading all product images. I want to stop that.

I have a category called Appereal this category has more than 100 products I wrote a query with a pagination limit of 12 but when checking my bandwidth usage is high because this time it's loading all products when clicking the category page.

I want solutions like when I click the category page I want to load the first page 12 products only after clicking the second page only have to load the other 12 images.

Please help me or advise me on how to fix these issues with laravel.

My Query

$pro = DB::table('category_and_products')
                ->join('sub_category_one','sub_category_one.id','=','catpro_sub_cat_one')
                ->join('product','prod_product_code','=','catpro_prod_code')
                ->join('supplier','supp_code','=','prod_supplier_code')
                ->select('prod_product_code','prod_supplier_code', 'product_name', 'prod_image1', 'prod_from_price','supp_margin','prod_supp_margin','prod_seo_title')
                ->where('suco_seo_title','=',$mId)
                ->where('supp_flag','=','1')
                ->groupBy('prod_product_code')
                ->orderBy('supp_seq_no','ASC')->orderBy('product_name','ASC')->paginate(12);