Question

我正在使用AJAX以JSON格式将数据（文本，链接，img链接）从服务器传输到前端。每个数据都是单独的产品，可以归类为其中一个类别。

e.g。我想为不同类别的产品提供不同的布局（CSS）。假设只有鞋子，衣服和短裤。这3个类别的布局：

鞋子：较大的标题（100px），白色字体颜色
衣服：中等标题（80px），黑色字体颜色
短裤：小标题（50px），绿色字体颜色

为了实现这一点，我在服务器上定义了新的变量“category_id”来识别产品类别，并将if else函数放在AJAX成功函数中：（如果这个项目是鞋子，则category_id为1.对于衣服，category_id为2，而category_id为3则为短裤。）

在js里面：

 $.ajax({  
            url:'http://localhost:8080/',
            dataType:'json',
            type:'get',
            success: function(result){
                   console.log(result);
                   $("#product_title").html(result.title);  
                   $("#product_img").attr("src",result.imageURL);
                    console.log(result.category_id);
                        if(result.category_id == 1){
                            $("#product_title").css("font-size","100px")
                            $("#product_title").css("color","white")
                        }
                        else if(result.category_id ==2){
                            $("#product_title").css("font-size","80px")
                            $("#product_title").css("color","black")
                        }
                        else{
                            $("#product_title").css("font-size","50px")
                            $("#product_title").css("color","green") 
                        }},

它实际上做了我想要的，但它加载速度很慢，特别是如果我有超过4个类别我知道条件语句会降低加载速度，但不知道如何改进它....

我认为可以创建一些模板来首先定义if else函数中的内容以使其加载更快？或者更好的方式？

使用基于Ajax响应的条件成功回调时加载速度更快

0 个答案: