JS图片筛选器首次加载页面空白 点击筛选选项后才正常如何解决

问题根因 #

现有代码仅为筛选按钮绑定了点击触发筛选的逻辑，页面首次加载完成后没有主动执行筛选方法，所有带filterDiv类的元素默认没有show类，因此会显示空白，只有点击按钮触发筛选后才会给对应元素加上show类正常显示。

解决方法 #

在现有JS代码的末尾添加一行代码，页面加载完成后主动触发一次默认筛选（默认显示全部分类即可），同时注意同步按钮的默认激活状态：

• 先给HTML中的「全部」分类按钮默认添加active类，保证首次加载的按钮高亮状态和筛选结果匹配
• 在现有JS代码的最后追加一行调用默认筛选的代码：

// 页面加载完成后默认显示全部分类内容
filterSelection("all")

修改后完整代码 #

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// 给当前点击按钮添加激活高亮样式
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// 新增：页面加载完成后默认展示全部分类内容
filterSelection("all")

额外注意事项 #

• 确保你的CSS规则中.filterDiv默认是display: none，.filterDiv.show是display: block（或对应展示样式），和现有筛选逻辑匹配
• 如果你的默认展示分类不是全部，只需要把上面调用时传入的"all"改成你需要的默认分类值即可

内容的提问来源于stack exchange，提问作者ambaamba