Javascript - 无限滚动错误？

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>");