I am currently working on optimizing my website for improved loading speed and responsiveness. Users can scroll through up to 4k images, apply filters, and sort them based on their preferences.
Below is the code snippet for my filtering function:
function filter(){
// NEED A WAY TO IMPLEMENT MULTI-FILTERING HERE
var input, filter, span, txtValue, i, a;
input = document.getElementById('userFilter'); // user's input
filter = input.value.toUpperCase(); // capitalize user input
itemWrappers = document.getElementsByClassName('itemWrapperColumns');
for (i = 0; i < itemWrappers.length; i++){
a = itemWrappers[i];
txtValue = a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
itemWrappers[i].style.display = ""; // need to hide the item container, not just the span as per the comment
}else{
itemWrappers[i].style.display = "none";
}
}
}
The above code worked fine when all images were loaded with a long scroll bar. However, I implemented a way to defer image rendering until the user scrolls down using
content-visibility: auto;Since making this change, the filtering functionality has been affected. The filter now only applies to the items visible on the screen, while those yet to be rendered are not included in the filter logic.
Even though the elements of these unrendered items exist on the page, they do not show up due to the content-visibility property.
If anyone has suggestions on how to efficiently render a large number of images with sorting and filtering capabilities, I am open to alternative solutions.
Thank you in advance for your help.
Edit: For additional context, I am looking to hide the top-level div wrapper that contains everything see image description here