Question

我制作了一个像无限加载脚本的脚本。当您从上到下滚动时，一切正常。单击产品并点击浏览器后退按钮返回带有无限加载程序的页面时出现问题。所有产品再次加载。

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

有没有人知道解决方案，或者可能指向某个方向？

我的完整加载器脚本 - ＆gt;

<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>

更新完整代码

防止脚本再次重新加载

0 个答案: