0

我制作了一个类似无限加载脚本的脚本。当您从上到下滚动时，一切正常。当我单击产品并单击浏览器后退按钮以返回具有无限加载器的页面时，出现问题。重新加载所有产品。

经过一番搜索，我发现这可能是因为再次触发了该document.ready功能。问题是所有其他脚本都不再工作了。我的下一个建议是在加载产品之前清空加载产品的 div。现在的问题是只加载了下一页的第一个或最后一个产品。

有谁知道解决方案或者可以指出我的一些方向？

我的完整加载程序脚本->

<script type="text/javascript">

  var currentPage = {{ collection.page }};
  var collectionPages = {{ collection.pages }};
  var category = '{{ collection.internal.url }}';

  var appendProduct = function(product) {
    if(currentPage == 1){
      return false
    }
        //$(".collection-more").html("");
    $('<div class="product"></div>').html(product).appendTo($(".collection-more"));  
    var i = 1;
    $('.product').each(function() {
      if(i++ % 3 == 0)
        $(this).addClass('last');
    });
  };

  var loadProducts = function() {

    var url = "http://www.hioshop.nl/"+category+"/page"+currentPage+".ajax";

    $.getJSON(url,function(data) {

      $.each(data.products, function(index, product) {

        var imageUrl = product.image.replace('50x50x2', '180x150x2');

        var itemHtml = '' +
            '<a href="' + product.url + '" title="'+ product.fulltitle +'"><img src="'+imageUrl+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'" />';

        if(product.data_01 === 'sale'){
          itemHtml = itemHtml + '<div class="labels sale"></div>';
        }
        if(product.data_01 === 'nieuw'){
          itemHtml = itemHtml + '<div class="labels nieuw"></div>';
        }
        itemHtml = itemHtml +   
            '</a>' +
            '<div class="info">' +
            '<h3>' + '<a href="' + product.url + '" title="'+ product.fulltitle +'">' + product.fulltitle + '</a>' + '</h3>' +
            '<div class="price">' + product.price.price_money + '';

        if(product.price.price_old){
          itemHtml = itemHtml + ' <span>' + '<del>' + product.price.price_old_money + '</del>' + '</span>';
        }    

        itemHtml = itemHtml +
          '</div>' + // price
          '<div class="gridAddToCart">' +
          '<a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>Details</span></a>' +
          '<div style="margin-top:2px;"></div>' +
          '<a class="opener button blue" href="{{ 'cart/add/' | url }}'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>In winkelwagen</span></a>'

          itemHtml = itemHtml +
          '</div>' + // gridAddToCart
          '</div>' + // info
          '<div class="clear"></div>' +
          '</div>';

        appendProduct(itemHtml)
          });

        $("#overlay").fadeOut();

        $(window).scroll(function() {
          update();
        });

      });
    };

    loadProducts();

    var isUpdating = false;

    var update = function() {  

      if($(window).height() + $(window).scrollTop() >= $(document).height() - 2000) {

        if(currentPage < collectionPages && !isUpdating) {

          isUpdating = true;

          currentPage++;
            $("#overlay").fadeIn();
          $(window).unbind('scroll');  


          setTimeout(function(){

            loadProducts();

            setTimeout(function(){

              isUpdating = false;

            }, 100);

          }, 100);
        }
      }
    };

    $(window).scroll(function() {
      update();
    });


</script>

更新完整代码

4

0 回答 0