HTML - How to only load filtered images?

204
February 12, 2018, at 10:54 AM

I was trying to create an image filter for my webpage. I used the following code:

<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("searchColumns");
li = ul.getElementsByTagName('figure');
if (filter==""){
  li[i].style.display = "none";
}
else{
  for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("figcaption")[0];
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "inline-block";
      } else {
          li[i].style.display = "none";
      }
 }  }
}
</script>

But the problem is that I have 200+ images there loading on startup, which takes a while. Is there a way to prevent them from loading until they appear on the filter?

Answer 1

Does this work?

function filterSearch() {
    var query = document.getElementById('myInput').value.toUpperCase(),
    ul = document.getElementById("searchColumns"),
    li = ul.getElementsByTagName('figure');
    if (query == "") {
        ul.style.display = "none";
    }
    else for (var i = 0; i < li.length; i++) {
        var a = li[i].getElementsByTagName("figcaption")[0];
        if (a.textContent.toUpperCase().indexOf(query) !== -1) {
            li[i].style.display = "inline-block";
        } else {
            li[i].style.display = "none";
        }
    }
}
Rent Charter Buses Company
READ ALSO
How to define a &ldquo;global&rdquo; variable in a component? (Angular4)

How to define a “global” variable in a component? (Angular4)

I have an app-editor-component which contains a lot of nested components inside it's structureWhen the component is loaded, it creates an array: obj_list : MyObject[]

210
Launch a click function one after another one

Launch a click function one after another one

I have different functions such as:

168
Using afterClose event with Fancybox3

Using afterClose event with Fancybox3

How can I create an afterclose event with FancyBox3? I'm using afterClose event with the second version of fancybox but i'm trying to upgrade to fancybox3 and the instructions say to put the options in "data-options" attribute

1042