jquery 如何在页面加载中停止加载所有图像

up9lanfz  于 2022-12-12  发布在  jQuery
关注(0)|答案(1)|浏览(238)

我开发了一个电子商务网站使用laravel 7现在我面临的一个问题是,当我点击分类页面,它的时间加载所有产品图片。我想停止。
我有一个类别称为外观这个类别有超过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);
pgky5nke

pgky5nke1#

你也可以使用 AJAX load并操纵它来作为分页。我已经在我的模块中使用了它。你可以从下面的内容中参考:

<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>

相关问题