Implementation code for infinite scrolling with n container elements

Scenario

How to correctly render lists up to 10000 elements.

Infinite drop-down loading technology forces users to keep scrolling to view large blocks of content. This approach continuously loads new content as you scroll down.

When you use scrolling as the primary method of discovering data, it can keep your users on your page longer and increase user engagement. With the popularity of social media, a large amount of data is consumed by users. Infinite scrolling provides an efficient way for users to browse large amounts of information without having to wait for the page to preload.

If we change our way of thinking, if a page consists of 10,000 full-width components, how can we use 5 components to dynamically render the entire page?

Solution

We have many solutions for optimizing long lists, such as paging, lazy loading, etc. There is a very good interaction (chrysanthemum picture), which allows users to wait. This plan was also very successful.

How to find a different approach?

1. In a single-page application, can we analyze the paging solution? There are 10 elements per page, and each paging renders 10 elements according to

2. Can we use a bracket to support the length of the entire list and render the corresponding 10 elements when the screen scrolls to the corresponding position?

Flickering issue

When we implement this idea, flickering problems will occur. Due to the frequent scrolling events, we find that the elements we see are constantly redrawn, because each time we transition, we find which ten elements need to be rendered and then replace them directly.

The idea here is to render 10 at the screen position I can see, and then derive 10 renderings upwards and downwards, for a total of 30. When controlling the rendering, always replace the top or bottom element, so that the part we can see in the middle does not need to be redrawn. It's just redrawing the pre-rendered data.

principle

Implement a component that can display a list of n items with a fixed window size of 5 elements: i.e. at any time, there are only 5 DOM containers on the infinite scroll n elements.

 <ul>
        <li style="transform: translate3d(0px, 0px, 0px);">……</li>
        <li style="transform: translate3d(0px, 60px, 0px);">……</li>
    </ul>

The content of a long list generally has a regular pattern. The height of this list can be directly calculated by the number of <li>. For example, if there are 1000 elements and the height of each element is 60px, then we can quickly calculate that the height of the entire list is 60000px.
After having the container, the internal <li> is absolutely positioned relative to <ul>, and js is used to directly calculate the corresponding 'transform: translate3d(0px, 0px, 0px);' attribute of each <li>
By monitoring the scroll time, we can continuously find the <li> that needs to be rendered at the current position, compare it with the previous set of rendering data, skip the same <li>, find the different elements from the previous set of rendering data, and then make corresponding replacements

For example: There are 100 elements, and only 5 are displayed on the homepage. Initially, [0,1,2,3,4] these 5 <li> need to be rendered. When I scroll down a little, [1,2,3,4,5] these <li> need to be rendered. At this time, do not directly replace the entire element, only replace the difference items. The structure should be [5,1,2,3,4]. Because it is absolutely positioned, it will deviate from the standard flow. A single redraw will not affect the other four, thereby improving performance.

How to achieve it

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <title>Document</title>
  <style>
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      position: relative;
    }

    ul li {
      position: absolute;
      top: 0;
      width: 100%;
      height: 31px;
      line-height: 32px;
      border-bottom: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <ul>
  </ul>
</body>
<script>
  //Total container var list = [];
  //Element container within the visible range var showList = [];
  // Rendering container var renderList = [];
  // The height of each container var lineHeight = 32

  // Initialize 1000 elements for (var i = 0; i < 1000; i++) {
    list.push({ id: i, text: '第' + (i + 1) + '个元素', top: i * lineHeight, bottom: (i + 1) * lineHeight })
  }
  // Initialize container height $('ul').attr('style', 'height:' + 1000 * lineHeight + 'px')
  // Find the function that initializes the container render(top, bottom) {
    showList = []
    // Mark which data is repeated with the data that has been rendered, and this part will not be rendered repeatedly var sameIndex = []
    // Find out which element the scroll position is on var currentIndex = 0
    for (var i = 0; i < list.length; i++) {
      var item = list[i]
      if (item.top <= window.scrollY && item.bottom > window.scrollY) {
        currentIndex = i;
        break;
      }
    }
    var range = 0
    // Search for the elements to be displayed above and below the currently found element, until the total number reaches 35 while (range < 100 && showList.length + sameIndex.length < 35) {
      if (currentIndex - range >= 0) {
        // Compare whether the elements that meet the conditions are in the rendered list. If they are, mark them. If not, put them in showList and replace the unmarked elements at that time if (renderList.includes(list[currentIndex - range].id)) {
          // sameIndex.push(currentIndex-range)
          sameIndex.unshift(renderList.indexOf(list[currentIndex - range].id))
        } else {
          showList.unshift(list[currentIndex - range])
        }
      }

      if (currentIndex + range < list.length && range != 0) {
        if (renderList.includes(list[currentIndex + range].id)) {
          sameIndex.push(renderList.indexOf(list[currentIndex + range].id))
        } else {
          showList.push(list[currentIndex + range])
        }
      }
      range++
    }
    // Replace the new elements that need to be rendered with the unmarked elements in the render list if (renderList.length > 0) {
      for (var i = 0; i < renderList.length; i++) {
        if (!sameIndex.includes(i) && showList.length) {
          renderList[i] = showList.shift().id
          $('ul li').eq(i).html(list[renderList[i]].id + list[renderList[i]].text).attr('style', 'transform: translate3d(0px, ' + list[renderList[i]].top + 'px, 0px);')
        }
      }
    } else {
      // Initialize the list for the first time renderList = showList.map(function (val) { return val.id })
      renderList.map(function (key) {
        $('ul').append($('<li style="transform: translate3d(0px, ' + list[key].top + 'px, 0px);"">#' + list[key].id + list[key].text + '</li>'))
      })
    }
    console.log(renderList)
  }
  // First rendering render()
  $(window).scroll(function (e) {
    render()
  });

</script>

</html>

TODO

Compared with the method of replacing container elements, it always feels that it can be optimized, which can improve the operating efficiency and optimize the white screen that appears when scrolling quickly.
Here is a thinking question [0,1...,10000]. Take out 5 elements each time, compare the newly selected ones with the old ones, keep the intersection of the two arrays, and replace the non-intersection of the old array with the new elements in the new array. For example, the first time is [0,1,2,3,4], and the second time is [2,3,4,5,6], then the comparison generates [5,6,2,3,4], and if the third time is [4,5,6,7,8], the generated value is [5,6,7,8,4]. Get this result array with the least amount of code.

summary

Complete layout and initialization through data
Departing containers from the standard flow by positioning them
By comparing the data, we can find out the different container elements and redraw as few container elements as possible each time.

Next issue-----Component collocation to achieve a long list

Key Points

Components are different from regular lists. The height of components may not be controllable and may vary depending on the mobile device.
Due to the different component heights, the number of components in the rendering area is also different, which results in different numbers of containers.
The height is not easy to calculate directly through data. If the whole rendering is required and then the position and height are calculated through DOM, it will consume the first loading performance.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Essential knowledge for web development interviews and written tests (must read)

>>: Summary and practice of javascript prototype chain diagram

Tutorial on installing mysql under centos7

Implementation code for infinite scrolling with n container elements

Tutorial on installing mysql under centos7

Use nginx to dynamically convert image sizes to generate thumbnails

In-depth explanation of slots and filters in Vue

MySQL implementation of lastInfdexOf function example

Summary of MySQL usage specifications

Simple implementation of ignoring foreign key constraints when deleting MySQL tables

How to set the width and height of html table cells

Analysis of slow insert cases caused by large transactions in MySQL

Implementation of interactive data between QT and javascript

MySQL uses covering index to avoid table return and optimize query

Recommend

How to install Graphviz and get started tutorial under Windows

Detailed explanation of Metadata Lock that you must know when changing the MySQL table structure

HTML validate HTML validation

Tutorial on installing lamp-php7.0 in Centos7.4 environment

Steps to install MySQL 5.7 in binary mode and optimize the system under Linux

How to reduce the root directory of XFS partition format in Linux

Two ways to build Docker images

How to implement insert if none and update if yes in MySql

Using Vue3 (Part 1) Creating a Vue CLI Project

How to use uni-app to display buttons and search boxes in the top navigation bar

A few experiences in self-cultivation of artists

Implementing parameter jump function in Vue project

Discuss the application of mixin in Vue

Detailed explanation of homology and cross-domain required for front-end interviews

WeChat applet implements search function and jumps to search results page