How can I load only specific images on a webpage using HTML?

Question

How can I load only specific images on a webpage using HTML?

I attempted to implement an image filter for my website by using the code below:

<script>
function myFunction() {
// Initialize 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>

However, the issue I encountered is that all of the 200+ images are loading on startup, resulting in a delay. Is there a method to prevent them from loading until they are filtered?

javascript html css

Answer 1

Answer №1

Is this operational?

function searchFilter() {
    var input = document.getElementById('searchInput').value.toUpperCase(),
        list = document.getElementById("filterItems"),
        items = list.getElementsByTagName('div');
        
    if (input == "") {
        list.style.display = "none";
    } else {
        for (var j = 0; j < items.length; j++) {
            var b = items[j].getElementsByTagName("h3")[0];
            if (b.textContent.toUpperCase().indexOf(input) !== -1) {
                items[j].style.display = "block";
            } else {
                items[j].style.display = "none";
            }
        }
    }
}

Answer 2

Is this operational?

function searchFilter() {
    var input = document.getElementById('searchInput').value.toUpperCase(),
        list = document.getElementById("filterItems"),
        items = list.getElementsByTagName('div');
        
    if (input == "") {
        list.style.display = "none";
    } else {
        for (var j = 0; j < items.length; j++) {
            var b = items[j].getElementsByTagName("h3")[0];
            if (b.textContent.toUpperCase().indexOf(input) !== -1) {
                items[j].style.display = "block";
            } else {
                items[j].style.display = "none";
            }
        }
    }
}

Answer 3

Answer №2

Thanks to the assistance of @A.Zaima, I was able to resolve this issue. I structured an array containing all the image URLs and another holding their respective names. Here is the code snippet that solved the problem:

var input, filter, link, i;
input = document.getElementById('searchInput');
filter = input.value.toUpperCase();
if (filter!=""){
  for (i = 0; i < names.length; i++) {
      link = names[i];
      if (link.substring(0, filter.length)==filter) {
          var figure = document.createElement("FIGURE");
          var img = document.createElement("IMG");
          var figcaption = document.createElement("FIGCAPTION");
          var textnode = document.createTextNode(names[i]);
          figcaption.appendChild(textnode);
          img.src = links[i];
          document.getElementById("searchResults").appendChild(figure);
          figure.appendChild(img);
          figure.appendChild(figcaption);
      }
    }
  }
}

Answer 4

Thanks to the assistance of @A.Zaima, I was able to resolve this issue. I structured an array containing all the image URLs and another holding their respective names. Here is the code snippet that solved the problem:

var input, filter, link, i;
input = document.getElementById('searchInput');
filter = input.value.toUpperCase();
if (filter!=""){
  for (i = 0; i < names.length; i++) {
      link = names[i];
      if (link.substring(0, filter.length)==filter) {
          var figure = document.createElement("FIGURE");
          var img = document.createElement("IMG");
          var figcaption = document.createElement("FIGCAPTION");
          var textnode = document.createTextNode(names[i]);
          figcaption.appendChild(textnode);
          img.src = links[i];
          document.getElementById("searchResults").appendChild(figure);
          figure.appendChild(img);
          figure.appendChild(figcaption);
      }
    }
  }
}

How can I load only specific images on a webpage using HTML?

Answer №1

Answer №2

Similar questions

Conceal a component when the succeeding one appears on a separate line

Error: The Google Translate key is not found in the Node.js AJAX request

Issues with data within a Vue.js pagination component for Bootstrap tables

Is it feasible to link an Angular property value to the value of an HTML data attribute?

Angular: merging multiple Subscriptions into one

Choose components identified by a dot

Extract the text from an html element by utilizing xpath

Converting HTML code into executable PHP code

When programming with PHP and JavaScript, managing events' start dates and end dates

Error Handling in ReactJS

External API data is shown in the browser console but appears as undefined on the page

Implementing jQuery to showcase an element on the screen

Removing a dynamic component in Angular

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

What is the best way to change a byte array into an image using JavaScript?

Embracing the Quirks of JSON: A Call for a

Is there a way to turn off vue.js transitions specifically for testing purposes?

What is the best way to call a method within a TypeScript class using its name as a string while already inside the class itself?

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

Unable to adjust the text color to white