{"id":2335,"date":"2019-08-24T13:00:31","date_gmt":"2019-08-24T12:00:31","guid":{"rendered":"https:\/\/chewett.co.uk\/blog\/?p=2335"},"modified":"2019-08-26T21:08:20","modified_gmt":"2019-08-26T20:08:20","slug":"d3-js-version-5-lazily-loading-dom-elements","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/2335\/d3-js-version-5-lazily-loading-dom-elements\/","title":{"rendered":"D3.js version 5 Lazily loading DOM elements"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In this example I demonstrate how you can lazily load DOM elements as you scroll through a page using D3.js. The full code for this is available on my website<\/a>.<\/p>\n\n\n\n\n\n\n\n

Why you might want to lazily load DOM elements<\/h2>\n\n\n\n

As page size increases the browser will slow down rendering it. This can have detrimental effects when someone is using the page.<\/p>\n\n\n\n

One way to reduce the amount of DOM elements on the page is to only draw those that a viewer can see. By doing this once the person has scrolled past elements they can be cleaned up and removed.<\/p>\n\n\n\n

This should improve the redraw speed and memory usage of the page, as it needs to store less elements in the DOM.<\/p>\n\n\n\n

This will however increase the complexity of the page, and may overall cause it to run slower cumulatively as it will spend more time performing calculations.<\/p>\n\n\n\n

Working out where each element will be placed<\/h2>\n\n\n\n

The big disadvantage of this method is that you need to keep track of where all the elements are on the page. Once you know this you can work out which ones you conditionally want to not display.<\/p>\n\n\n\n

In my example I am going focus on y axis scrolling (standard scrolling). As elements get scrolled offscreen they will be removed from the page.<\/p>\n\n\n\n

For my example I am creating rectangles and when created, storing the maxium and minimum y positions. Here this is done in a loop that creates my data.<\/p>\n\n\n

\nfor(var i = 0; i < ROWS; i++) {\n    rawData.push({"index": i, "color": colorScale(i), "startY": i * ROW_HEIGHT, "endY": (i+1) * ROW_HEIGHT});\n}\n<\/pre><\/div>\n\n\n
Calculating these values is trivial in this case as my SVG is placed at (0,0)<\/code> on the page. However if your SVG is not placed here you will also need to calculate the position of the SVG and add this to your Y values.<\/p>\n\n\n\n
These values are stored as the position of these elements never change. This is then later used to decide whether it should be rendered or not.<\/p>\n\n\n\n
Only rendering those elements currently shown<\/h2>\n\n\n\n
Once I have calculated the Y positions of the elements I can create my filter function to decide what is within the bounds of my user scroll.<\/p>\n\n\n\n
Here before I pass my data array to D3 I call filter()<\/code> on it to remove the elements I dont want to render.<\/p>\n\n\n
\n\/\/This will be called for each element, if this returns true it will keep the element in the array\n\/\/Otherwise it will remove it from the newly returned array\nfunction filterVisibleElements(d) {\n    return (d.startY >= minYWithPreloading && d.endY <= maxYWithPreloading)\n        || (d.startY <= minYWithPreloading &&  d.endY >= minYWithPreloading)\n        || (d.startY <= maxYWithPreloading && d.endY >= maxYWithPreloading)\n    ;\n}\n<\/pre><\/div>\n\n\n
Each element will be tested with the above function to decide whether it should be drawn or not.<\/p>\n\n\n\n
For this I have defined two variables, minYWithPreloading<\/code> and maxYWithPreloading<\/code>. These define the minimum and maximum Y that I want all elements to sit in.<\/p>\n\n\n\n
These have been created by taking the current Y positions of the screen and padding it by 1.5 times the viewpoint. This renders the elements before the user scrolls to it, meaning that if they scroll fast the elements should always be rendered.<\/p>\n\n\n\n
The three tests used to decide whether an element should be rendered are:<\/p>\n\n\n\n