Question

我正在尝试为我的网页创建图片过滤器。我使用了以下代码：

<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>

但问题是我在启动时加载了200多张图片，这需要一段时间。有没有办法阻止它们加载直到它们出现在过滤器上？

Answer 1

这有用吗？

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";
        }
    }
}

Answer 2

感谢@ A.Zaima的帮助，我找到了解决方案。我创建了一个包含所有图像链接的数组，另一个包含所有图像名称的数组，并编写了以下代码：

var input, filter, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
if (filter!=""){
  for (i = 0; i < names.length; i++) {
      a = names[i];
      if (a.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("searchColumns").appendChild(figure);
          figure.appendChild(img);
          figure.appendChild(figcaption);
      }
    }
  }
}

HTML - 如何只加载过滤后的图像？

2 个答案: