如何在頁面加載中停止加載所有圖片

Question

我使用 laravel 開發了一個電子商務網站 7 現在我面臨的問題是，當我單擊類別頁面時，它正在加載所有產品圖片。 我想阻止它。

我有一個名為 Appereal 的類別，這個類別有 100 多種產品，我寫了一個分頁限制為 12 的查詢，但是當檢查我的帶寬使用率很高時，因為這次它在單擊類別頁面時加載了所有產品。

我想要解決方案，例如當我單擊類別頁面時我想加載第一頁 12 個產品只有在單擊第二頁后才需要加載其他 12 個圖像。

請幫助我或建議我如何使用 laravel 解決這些問題。

我的查詢

$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);

Answer 1

您還可以使用 ajax 加載和操作它作為分頁工作。 我已經將它用於我的模塊。 您可以參考以下內容：

<script>
  var ENDPOINT = "{{ url('/') }}";
  var page = 1;
  infinteLoadMore(page);
  $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
      page++;
      infinteLoadMore(page);
    }
  });
  function infinteLoadMore(page) {
    $.ajax({
      url: ENDPOINT + "/blogs?page=" + page,
      datatype: "html",
      type: "get",
      beforeSend: function() {
        $('.auto-load').show();
      }
    })
    .done(function(response) {
      if (response.length == 0) {
        $('.auto-load').html("We don't have more data to display :(");
        return;
      }
      $('.auto-load').hide();
      $("#data-wrapper").append(response);
    })
    .fail(function (jqXHR, ajaxOptions, thrownError) {
      console.log('Server error occured');
    });
  }
</script>