Question

我的网站上有custom无限卷轴。它工作得很完美，但唯一的问题是我不知道如何修复它。如果你向下滚动，那么它会加载项目，但它reloads the items which were already loaded。我希望这是可以理解的。如果没有，我可以为它制作一个gif图像..

var perPage = 20;
            function paginate(items, page) {
                var start = perPage * page;
                return items.slice(start, start + perPage);
            }
            var condition = '';

            function renderItems(pageItems) {
                pageItems.forEach(function(item, index, arr) {
                    var message = 'BitSkins Price: $' + Math.round(item.bprice) + '';
                    if (item.price !== null) {
                        if (item.bprice === '') {
                            message = 'Item never sold on BitSkins!';
                        }
                        if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
                            if (item.special == "1") {
                                setSpecialItems(item.id, item.name, item.condition, item.originalname, item.iconurl, item.price, message, item.inspect);
                            } else {
                                $("#inventory").html($("#inventory").html() + "<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:13.5px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 0px;height: 295px;box-shadow: inset 0px 0px 25px 2px #232323;border: 1px solid black' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left;font-size: 14.5px;color: #E8E8E8;font-family: Roboto;position: relative;right: -3px;'>" + item.name + "</div><div class='condition' style='text-align: left;color: #E8E8E8;font-family: Roboto;position: relative;left: 3px;'>" + item.condition + "</div><div class='center-align' style='position: relative;padding:0%;top: -33px;'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea' style='position: relative;top: -129px;background: rgba(0, 0, 0,0.15);display: block;height: 163px;'><div class='buyer-price center-align' style='font-size:22.5px;font-family: Arial Black;color:#E8E8E8'>$" + Math.round(item.price) + "<div class='bitskinscomp' style='font-weight: normal;font-size:12px;font-family: Roboto;font: bold;'>" + message + "</div></div><a class='btn waves-effect waves-light' style='position:relative;left:-5px;top:50px' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light' style='position:relative;right:-5px;top:50px' id='purchaseButton'>Cart</a></div></li>");
                            }
                        }
                    }
                });
            }
            var win = $(window);
            var page = 0;
            renderItems(paginate(items, page));
            win.scroll(function() {
                if ($(document).height() - win.height() == win.scrollTop()) {
                    page++;
                    renderItems(paginate(items, page));
                }
            }

Answer 1

为了仅加载新项目，请不要分配整个HTML（包括新旧部分）。

所以改变：

$("#inventory").html($("#inventory").html() + "<li ... > ... </li>";

为：

$("#inventory").append("<li ... > ... </li>");

Javascript - 无限卷轴错误？

1 个答案: