如何一次性批量添加AJAX加载的产品至Slick Carousel？

云原生阿岚

2026-8-8

问题描述

我使用Slick Carousel展示数据库中的产品列表，出于性能考虑初始仅加载24个产品。为展示全部产品，实现了如下功能：当用户滑动至距离轮播末尾还有2个幻灯片时，通过AJAX加载另外24个产品，再调用slickAdd方法将其添加到现有轮播中。

目前功能可正常运行，但由于每个新产品都需单独调用一次slickAdd，导致添加过程耗时数秒。曾尝试将slickAdd移至循环外部，但仅成功添加1个产品，因此想咨询：是否存在一次性将24个新产品全部添加到Slick Carousel中的方法？

当前代码：

$('.demo').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    var komponent = $(".komponent-container.active").attr("id");

    var slideCount = slick.slideCount-6;

    console.log(slick.slideCount);

    if(nextSlide == slideCount){
        console.log("loadmore");
        $.ajax({
            type: "POST",
            url: "/project/public/konfigurator",
            data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
            dataType: "json",

            success: function (data) {

                var data_parser = JSON.parse(data)[0];

                if (data_parser.length > 0) {

                    for (i = 0; i < data_parser.length; i++) {
                        var produkt_nazov = 0;
                        if (data_parser[i].produkt.length > 45) {
                            produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
                        } else {
                            produkt_nazov = data_parser[i].produkt;
                        }

                        $('.demo').slick('slickAdd', '&lt;div&gt;&lt;div&gt;&lt;div class=&quot;item-container&quot;&gt;&lt;div class=&quot;container-wrapper&quot;&gt;&lt;div class=&quot;produkt-container&quot;&gt;&lt;div class=&quot;item-left&quot;&gt;&lt;div class=&quot;item-image-wrapper&quot;&gt;&lt;img draggable=&quot;false&quot; id=&quot;produkt-img&quot; src=&quot;img/konfigurator/'+komponent+'/' + data_parser[i].produkt + '/1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;cena&quot;&gt;' + data_parser[i].cena + ' €&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;item-right&quot;&gt;&lt;div class=&quot;item-info&quot;&gt;&lt;span class=&quot;item-title&quot;&gt;' + produkt_nazov + '&lt;/span&gt;&lt;span class=&quot;item-description&quot;&gt;&lt;span&gt;Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '&lt;/span&gt;&lt;span&gt;Veľkosť pamäte - ' + data_parser[i].vram_size + '&lt;/span&gt;&lt;span&gt;Typ pamäte - ' + data_parser[i].vram_type + '&lt;/span&gt;&lt;span&gt;Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;spodna-cast&quot;&gt;&lt;div class=&quot;action-buttons&quot;&gt;&lt;a class=&quot;detail-button&quot;&gt;Detail&lt;/a&gt;&lt;a class=&quot;add-button&quot;&gt;Vybrať&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
                        console.log("add");

                    }
                }
            },

            error: function (result) {
                alert('error');
            }
        });
    }
});

解决方案

Slick Carousel的slickAdd方法支持一次性传入多个幻灯片的HTML字符串（每个幻灯片用独立的容器包裹，字符串间用空格或换行分隔），无需循环调用。通过先拼接所有新幻灯片的HTML，再一次性调用slickAdd，可以大幅减少DOM操作次数和Slick内部的重计算，提升性能。

修改后的代码如下：

$('.demo').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    var komponent = $(".komponent-container.active").attr("id");

    var slideCount = slick.slideCount-6;

    console.log(slick.slideCount);

    if(nextSlide == slideCount){
        console.log("loadmore");
        $.ajax({
            type: "POST",
            url: "/project/public/konfigurator",
            data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
            dataType: "json",

            success: function (data) {

                var data_parser = JSON.parse(data)[0];

                if (data_parser.length > 0) {
                    // 初始化空字符串，用于拼接所有新幻灯片的HTML
                    let newSlidesHtml = '';

                    for (i = 0; i < data_parser.length; i++) {
                        var produkt_nazov = 0;
                        if (data_parser[i].produkt.length > 45) {
                            produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
                        } else {
                            produkt_nazov = data_parser[i].produkt;
                        }

                        // 将当前产品的HTML拼接至总字符串
                        newSlidesHtml += `<div>
                            <div>
                                <div class="item-container">
                                    <div class="container-wrapper">
                                        <div class="produkt-container">
                                            <div class="item-left">
                                                <div class="item-image-wrapper">
                                                    <img draggable="false" id="produkt-img" src="img/konfigurator/${komponent}/${data_parser[i].produkt}/1.jpg" alt="" />
                                                </div>
                                                <div class="cena">${data_parser[i].cena} €</div>
                                            </div>
                                            <div class="item-right">
                                                <div class="item-info">
                                                    <span class="item-title">${produkt_nazov}</span>
                                                    <span class="item-description">
                                                        <span>Výrobca čipu - ${data_parser[i].vyrobca_cipu}</span>
                                                        <span>Veľkosť pamäte - ${data_parser[i].vram_size}</span>
                                                        <span>Typ pamäte - ${data_parser[i].vram_type}</span>
                                                        <span>Frekvencia jadra - ${data_parser[i].gpu_memory_clockrate}</span>
                                                    </span>
                                                </div>
                                                <div class="spodna-cast">
                                                    <div class="action-buttons">
                                                        <a class="detail-button">Detail</a>
                                                        <a class="add-button">Vybrať</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    }

                    // 一次性添加所有新幻灯片
                    $('.demo').slick('slickAdd', newSlidesHtml);
                    console.log("批量添加完成");
                }
            },

            error: function (result) {
                alert('error');
            }
        });
    }
});

关键说明

每个幻灯片必须用独立的外层<div>包裹，Slick会自动识别这些独立容器作为新的幻灯片
使用ES6模板字符串（``语法）拼接HTML，比传统字符串拼接更易读、更不易出错
仅调用一次slickAdd即可完成批量添加，避免了多次DOM操作带来的性能损耗

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