根据视图大小计算从服务器加载多少产品

Question

我正在开发 Spring-MVC 应用程序。在此，我想使用 Ajax 请求加载数据库中的产品。在这样做的同时，我必须检查用户设备的视图大小，然后计算它可以在即时视图中看到多少产品，并进行一定程度的滚动。例如：在 PC 或笔记本电脑上加载 30/40 个产品是正常的，但在移动设备上大约 10-15 个产品也足够了

我目前有客户端功能来获取屏幕的视图大小。我想知道如何根据屏幕尺寸计算从服务器加载的最佳产品数量。我正在发布我的 ajax 函数以防它有帮助。

Ajax函数：listallproducts/1中的1是页码

$(document).on('click','.product-image', function(event){
                $.ajax({
                 url: '../listallproducts/1',
                 type: 'POST',
                 success: function(response){
                         var newElement = $.parseHTML(response);
                         $(newElement).find(".products").css("display", "none");
                         $(newElement).find(".products").addClass("loadedProduct");
                                $("#freewall").append($(newElement).find(".products"));
                                initializeFreewall();
                                $("#freewall").find('.products').fadeIn(500);
                 },
                                error: function(xhr, status, error){
                                        alert("Da ist etwas schiefgelaufen" + xhr.responseText );
                                }
         });
        });

欢迎大家指点。谢谢你。

Answer 1

您也可以简单地计算 javascript 中的产品数量，对吧？喜欢：

var productsView = 20;
if(screenSize<SCREENSIZEHERE){
     productsView = 10;
}

然后在AJAX请求中发送当前显示产品的偏移量+productsView。（我建议使用偏移量而不是页码，以防屏幕尺寸发生变化。）连同 'url:'、'type:' 和 'succes:' 一起输入：

data: { productsView: productsView, offset: offset },

希望对您有所帮助..

根据视图大小计算从服务器加载多少产品

Calculating how many products to load from server based upon view-size

ajax