Laravel7分类页分页时全量加载商品图片问题如何解决

根因定位 #

你写的后端分页查询逻辑本身没有问题，paginate(12) 已经默认限制单次SQL查询只返回当前页的12条数据。出现全量图片加载的问题，核心原因是前端模板渲染逻辑错误：要么是误遍历了全量商品集合渲染DOM，要么是额外写了全量查询商品的逻辑传到了模板，导致浏览器解析到所有商品的img标签才会发起全量图片请求。 #

修复步骤 #

1. 先校验后端返回数据符合预期 #

在控制器中临时加打印逻辑，确认分页生效：

$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);
// 临时调试用，验证完删除
dd('当前页商品数：' . $pro->count(), '分类总商品数：' . $pro->total());

访问分类页，如果输出的当前页商品数为12，总商品数为该分类下的实际总量（100+），说明后端逻辑完全正常，问题出在模板层。

2. 修正Blade模板渲染逻辑 #

• 控制器端不要额外传递该分类下的全量商品集合到模板，只传分页后的$pro变量即可
• 模板中遍历商品时，直接遍历$pro变量，不要调用全量查询方法

常见踩坑：不要在Blade模板里直接写DB::table('product')->where(xxx)->get()这类全量查询代码，所有列表页渲染的商品数据必须用控制器传入的分页变量。

• 正确渲染示例：

<div class="product-wrap">
    {{-- 仅遍历当前页12条商品，生成对应DOM --}}
    @foreach($pro as $product)
    <div class="product-item">
        <img 
            src="{{ $product->prod_image1 }}" 
            alt="{{ $product->prod_seo_title }}"
            loading="lazy"
        >
        <div class="product-info">
            <h4>{{ $product->product_name }}</h4>
            <p class="price">￥{{ $product->prod_from_price }}</p>
        </div>
    </div>
    @endforeach
</div>

{{-- 渲染Laravel自带分页组件，点击切换页码会自动携带page参数请求对应页数据 --}}
<div class="pagination-container">
    {{ $pro->links() }}
</div>

3. 带宽优化补充 #

• 列表页不要直接加载商品原图，提前生成适配列表尺寸的缩略图，将图片体积压缩到原体积的1/10以下
• 给img标签加loading="lazy"原生懒加载属性，首屏外的图片会等滚动到对应位置再加载，进一步降低首屏带宽占用
• 分页跳转默认是普通GET请求，切页时只会拉取对应页的12条商品数据，不会重复加载其他页资源，不需要额外做接口改造

内容的提问来源于stack exchange，提问作者Jerad