javascript - Infinite scroll, destroy and recreate elements when scrolling
Get the solution ↓↓↓I know this might be a popular question, but I'd like to ask for advice from experts here specifically for my problem.
My webpage represents a Tree (meaning vegetation) with infinite scroll, e.g. the middle part of the tree - the image, is iterative and the number of iterations depends on my datasource.
So, the datasource is user records that will be represented as leaves on the tree. There are exactlyn
leaves for each middle part of the tree, and each leaf hasonClick
ajax listener:
I know I could append elements to my container as user scrolls down, but the problem is that even though rows at the top of the list become invisible as they scroll out of the view, they are still a part of the page and still consume resources. So the web app slows down and the listeners may not work properly.
I'm looking for any plugin that dynamically destroys elements as they become invisible and recreating them if they become visible again.
I've almost found a solution angular ui-scroll directive but not sure how to apply it. Here is the codepen, your forks would be highly appreciated.
My page now is working like this without dynamic loading:
foreach($leaves as $i=>$leaf)
{
if($i % NUM_OF_LEAVES == 0)
{
echo "<div class='tree-section'>";
echo '<img class="part" src="'.Yii::$app->request->baseUrl.'/images/tree_center.png"/>';
echo '<div class="leaves">';
for($j = 0; $j<NUM_OF_LEAVES ; $j++)
{
if(isset($leaves[$i + $j])){
//show leaf $leaves[$i + $j]
}
}
echo '</div>';
echo '</div>';
}
}
Answer
Solution:
Setting up a service that returns the data you need when called rather than pre-rendering it would be ideal. Their service demo provides aget
function, you should replace this get function with a$http
call to your server, to have it return to you just the tree pieces your need (sort of like paginating a response).
An untested example of this would be something like
angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
.factory('datasource', ['$http',
function ($http) {
var get = function(index, count, success){
// gets data from /datasourceapi/tree/?index=XXX <-- XXX is the offset from the beginning
return $http({
url:'/datasourceapi/tree/',
method: 'GET',
params:{index: index}
}).then(function(response){
return success(response);
});
}
return {
get: get,
};
}
]);
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: a non-numeric value encountered
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.