如何在不使用 Jquery 滚动到页面底部的情况下从源 html 页面加载子 html 页面内容？

Question

I am using Jquery to load a child html page. The child html page has a list of div's and the numbers can vary up to 50 div's. I am using Jquery.get to load the child html in parent. i have a requirement to view the content of the child containing all div's without scrolling to bottom of the page. I tried to use the below code but the div's from the child keep repeating after all the div's are displayed. Can anyone please let me know how to achieve this?

Parent.html

<div id="parent"></div>

<script>
    $.get('child.html', function(data){ // Loads content into the 'data' variable.
        $('#parent').append(data); // Injects 'data' after the #div element.                        
    });

    $(document).scroll(function(e){             
        if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){

            $.get('child.html', function(data){ // Loads content into the 'data' variable.
                $('#parent').append(data); // Injects 'data' after the #div element.                        
            });                                 
        }

    });
</script>

Child.html

<div class='row list' id=1>
    <span>1</span>
</div>

<div class='row list' id=2>
    <span>2</span>
</div>

<div class='row list' id=3>
    <span>3</span>
</div>

<div class='row list' id=4>
    <span>4</span>
</div>

<div class='row list' id=5>
    <span>5</span>
</div>

Answer 1

If I understand correctly, you want to load 50 DIV Elements from the child.html file at a time. To do this, we need to track how many items have been loaded and then filter the HTML before loading / appending it to the document.

We want to create a Flow / State diagram to understand what is needed.

1. Initial Load
   • Populate parent element with first 50 items from child.html
2. User reads content, scrolls down page
3. User reaches 70% of document height
   • Request next 50 elements
   • Append next result set to parent

Note: It would be preferable to use a Server Side Script , like PHP, that can serve up the data in chunks.

As I understand it currently, child.html is static and contains N number of elements. JS/jQuery has no way to load a specific number of items. The entire document will be loaded each time. Using .load() , we can filter for a specific selector.

The .load() method, unlike $.get() , allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

I thought we could use :lt() , like so:

$("#parent").load("child.html.row:lt(50)");

This is deprecated:

As of jQuery 3.4, the :lt pseudo-class is deprecated. Remove it from your selectors and filter the results later using .slice() . For example, :lt(3) can be replaced with a call to .slice( 0, 3 ) .

Do this, we would then revert back to $.get() like so.

$.get("child.html", function(ht){
  $("#parent").append($(ht).find(".row").slice(0,50));
});

This will work yet is not optimal as the GET request will return the entire document each time. If this is the case, it would be best to load the entire document initially and then reveal more items as the User scrolls down. This defeats the purpose.

If you want to try it, here is an example:

$(function() {
  var count = 0;

  function getNextSet(url, n) {
    var ht;
    $.get(url, function(data) {
      var start = count;
      count = count + n;
      ht = $(data).find(".row").slice(start, count);
    });
    return ht;
  }

  $("#parent").append(getNextSet("child.html", 50));

  $(document).scroll(function() {
    if ($(window).scrollTop() >= ($(this).height() - $(window).height()) * 0.7) {
      $("#parent").append(getNextSet("child.html", 50));
    }
  });
});