Javascript 为什么我的document.getElementsByTagName（'；img'；）.length查询返回0？

我正在尝试建立一个网站，在这个网站上，屏幕上显示的图片种类与url中的哈希值相关联。我试图使它的地方，加载圈出现，并保持可见，直到网页上的所有图像已加载

问题是我试图使用

（window）.load

，以便在加载所有图像后显示并删除加载循环。然而，window.load使圆圈在图像完成之前消失，向用户显示在屏幕上缓慢打印的图像。我找到了一个答案，它使用

document.images

或

document.getElementsByTagName（'img'）

来跟踪网页上每个图像的进度，这样我就可以达到我想要的效果，而且在我的本地主机服务器上，它确实起作用-页面启动后加载循环出现，直到所有图像都加载完毕为止，一旦发生这种情况，就会切换图像和加载循环的可见性。但是，当我将html和javascript文件上载到网站服务器时，

document.images

最初返回0。但是，如果我要多次正常刷新页面或硬刷新（ctrl-f5）一次，那么在本地主机上看到的情况就会发生。如果我再次刷新，那么返回0的问题又回来了

HTML:

家

出口

由

已完成的工作

艰苦的工作



由其他人完成

JavaScript:

const dir = "./submissions/";
var filenames = [];

function testAjax() {
  return $.ajax({
    url: "php/getfilenames.php",
  });
}
var promise = testAjax();
var ogsucname = new Map();
console.log(window.screen.width);
$(document).ready(function() {
  promise.success(function(data) {
    filenames = data.split(',');

    if (!window.location.hash) {
      window.location.href = 'index.html#Home';
    }
    if (window.location.hash) {
      if (window.location.hash.indexOf('Home') == 1) {
        ogsucname = makenames();
        console.log(ogsucname);
        makelinks();
      } else {
        var name = window.location.hash;
        name = name.replace("#", "");
        document.getElementsByClassName('Person_Page')[0].innerHTML = name + "'s Page";
        document.getElementsByClassName('Suc_n_OG')[0].childNodes[1].childNodes[1].innerHTML = "";
        document.getElementsByClassName('Suc_n_OG')[0].childNodes[1].childNodes[1].innerHTML = "Completed By " + name;
        document.title = name + "'s submissions";
        for (var i = 0; i < filenames.length; i++) {
          if (filenames[i].toLowerCase().indexOf(name) > -1) {
            var node = document.createElement("li");
            var button = document.createElement("button");
            var pic = document.createElement("img");
            pic.src = "submissions/" + filenames[i];
            button.setAttribute('onclick', 'tobig(this)');
            button.appendChild(pic);
            node.appendChild(button);
            if (filenames[i].split('_')[2] == null) {
              document.getElementsByClassName('Just_Suc')[0].childNodes[3].appendChild(node);
            } else if (filenames[i].toLowerCase().split('_')[0] == name) {
              document.getElementsByClassName('OG_n_Suc')[0].childNodes[3].appendChild(node);
            } else {
              document.getElementsByClassName('Suc_n_OG')[0].childNodes[3].appendChild(node);
            }
          }
        }
        if (document.getElementsByClassName('Just_Suc')[0].childNodes[3].childNodes[1] == null) {
          console.log('test1');
          document.getElementsByClassName('Just_Suc')[0].style.display = 'none';
        }
        if (document.getElementsByClassName('OG_n_Suc')[0].childNodes[3].childNodes[1] == null) {
          console.log('test2');
          document.getElementsByClassName('OG_n_Suc')[0].style.display = 'none';
        }
        if (document.getElementsByClassName('Suc_n_OG')[0].childNodes[3].childNodes[1] == null) {
          console.log('test3');
          document.getElementsByClassName('Suc_n_OG')[0].style.display = 'none';
        }
      }
    }

    function makenames() {
      var originators = [];
      var successors = [];
      for (var i = 0; i < filenames.length; i++) {
        var ogname = filenames[i].slice(0, filenames[i].indexOf("_")).toLowerCase();
        ogname = ogname.replace(".pn", "");
        originators.push(ogname);
        var sucname = filenames[i].split('_')[2];
        if (sucname != null) {
          var name = sucname.slice(0, sucname.indexOf("."));
          var lowername = name.toLowerCase();
          successors.push(lowername);
        }
      }
      var originators = [...new Set(originators)];
      console.log(originators);
      var tempmap = new Map();
      for (var i = 0; i < originators.length; i++) {
        var count = successors.reduce(function(n, val) {
          return n + (val === originators[i]);
        }, 0);
        tempmap.set(originators[i], count);
      }
      var contnames = new Map([...tempmap.entries()].sort((a, b) => b[1] - a[1]));
      return contnames;
    }

    function makelinks() {
      for (let [key, value] of ogsucname) {
        var node = document.createElement("li");
        var link = document.createElement("a");
        var textnode = document.createTextNode(key);
        link.href = 'javascript:pageredirect('+key+')';
        link.id = key;
        node.id = key + "listitem";
        link.setAttribute('onclick', "pagegen(this)");
        link.appendChild(textnode);
        node.appendChild(link);
        document.getElementById('buddy_load').appendChild(node);
        const style = document.createElement('style');
        var iconspath = "icons/axe_" + value + ".gif"
        var iditer = "#" + key + "listitem";
        style.textContent = iditer + "::before{content:''; display: flex;flex-direction: row;  height: 30px; width: 30px; background:url(" + iconspath + ") no-repeat; background-size: 30px; position:relative;margin-right: 20px;z-index:0;}";
        document.getElementById(key).append(style);
      }
    };

    function pagegen(obj) {
      window.location.href = 'buddypresent.html#' + obj.id;
    }

    function tobig(obj) {
      var getpic = obj.children[0].src;
      var bigimageload = document.getElementsByClassName("activate");
      var ogbox = document.getElementsByClassName("ogname");
      var sucbox = document.getElementsByClassName("sucname");
      var getnames = getpic.substring(getpic.lastIndexOf("."), getpic.lastIndexOf("/")).replace("/", "").toLowerCase();
      var getog = getnames.split('_')[0];
      var getsuc = getnames.split('_')[2];
      makenamelink(getog, ogbox[0]);
      makenamelink(getsuc, sucbox[0]);
      var getimageframe = document.getElementsByClassName("largeimageload");
      var pic = document.createElement("img");
      getimageframe[0].innerHTML = "";
      pic.src = getpic;
      bigimageload[0].style.display = 'block';
      getimageframe[0].appendChild(pic);
    }


  });
});
$(window).load(function() {
  if (window.location.hash) {
    if (window.location.hash.indexOf('Home') == 1) {
      document.getElementsByClassName('loader')[0].style.visibility = "hidden";
      document.getElementById("buddy_load").style.visibility = "visible";
    } else {
      var imgs = document.getElementsByTagName('img');
      var len = imgs.length;
      console.log(len);
      var counter = 0;
      for (var i = 0; i < imgs.length; i++) {
        if (imgs[i].complete) {
          incrementCounter();
        } else {
          imgs[i].addEventListner('load', incrementCounter, false);
        }
      }
    }
  }
  function incrementCounter() {
    counter++;
    if (counter == len) {
      document.getElementsByClassName('loader')[0].style.visibility = "hidden";
      document.getElementsByClassName("ContestantContent")[0].style.display = "block";
    }
  }
});

function closetobig() {
  var bigimageload = document.getElementsByClassName("activate");
  bigimageload[0].style.display = 'none';
}

function tobig(obj) {
  var getpic = obj.children[0].src;
  var bigimageload = document.getElementsByClassName("activate");
  var ogbox = document.getElementsByClassName("ogname");
  var sucbox = document.getElementsByClassName("sucname");
  var getnames = getpic.substring(getpic.lastIndexOf("."), getpic.lastIndexOf("/")).replace("/", "").toLowerCase();
  var getog = getnames.split('_')[0];
  var getsuc = getnames.split('_')[2];
  makenamelink(getog, ogbox[0]);
  makenamelink(getsuc, sucbox[0]);
  var getimageframe = document.getElementsByClassName("largeimageload");
  var pic = document.createElement("img");
  getimageframe[0].innerHTML = "";
  pic.src = getpic;
  bigimageload[0].style.display = 'block';
  getimageframe[0].appendChild(pic);
}

function makenamelink(name, box) {
  box.innerHTML = "";
  if (name != null) {
    var para = document.createElement("p");
    // para.href = "#";
    var paranode = document.createTextNode(name);
    // para.id = name;
    // para.setAttribute('onclick', "pageredirect(this)");
    // para.appendChild(paranode);
    box.innerHTML = name;
    box.parentNode.id = name;
    box.parentNode.setAttribute('onclick', "pageredirect(this)");
    // box.appendChild(name);
  }
}

function pageredirect(obj) {
  window.location.href = 'buddypresent.html#' + obj.id;
  window.onhashchange = function() {
    window.location.reload(true);
  }
}

function reloadpage() {
  // window.location.reload(false);
  window.location.reload(true)
}

function gohome() {
  window.location.href = 'index.html#Home';
}

const dir=“./submissions/”；
var文件名=[]；
函数testAjax（）{
返回$.ajax({
url:“php/getfilenames.php”，
});
}
var promise=testAjax（）；
var ogsucname=新映射（）；
控制台.日志（窗口.屏幕.宽度）；
$（文档）.ready（函数（）{
承诺.成功（功能（数据）{
filenames=data.split（'，'）；
if（！window.location.hash）{
window.location.href='index.html#Home'；
}
if（window.location.hash）{
if（window.location.hash.indexOf（'Home'）==1）{
ogsucname=makenames（）；
console.log（ogsucname）；
makelinks（）；
}否则{
var name=window.location.hash；
名称=名称。替换（“#”和“”）；
document.getElementsByClassName（'Person_Page'）[0]。innerHTML=name+“'s Page”；
document.getElementsByClassName（'Suc_n_OG'）[0]。childNodes[1]。childNodes[1]。innerHTML=“”；
document.getElementsByClassName（'Suc_n_OG'）[0]。childNodes[1]。childNodes[1]。innerHTML=“完成人”+name；
document.title=name+“提交的文件”；
对于（var i=0；i-1）{
var节点=document.createElement（“li”）；
var button=document.createElement（“按钮”）；
var pic=document.createElement（“img”）；
pic.src=“submissions/”+文件名[i]；
setAttribute（'onclick'，'tobig（this'）；
按钮。追加子项（pic）；
追加子节点（按钮）；
if（文件名[i].split（“”“）[2]==null）{
document.getElementsByClassName（'Just_Suc'）[0]。childNodes[3]。appendChild（节点）；
}else if（文件名[i].toLowerCase（）.split（“”“）[0]==name）{
document.getElementsByClassName（'OG_n_Suc'）[0].childNodes[3].appendChild（节点）；
}否则{
document.getElementsByClassName（'Suc_n_OG'）[0].childNodes[3]。appendChild（节点）；
}
}
}
if（document.getElementsByClassName（'Just_Suc'）[0].childNodes[3].childNodes[1]==null）{
log（'test1'）；
document.getElementsByClassName（'Just_Suc'）[0].style.display='none'；
}
if（document.getElementsByClassName（'OG_n_Suc'）[0].childNodes[3].childNodes[1]==null）{
log（'test2'）；
document.getElementsByClassName（'OG_n_Suc'）[0].style.display='none'；
}
if（document.getElementsByClassName（'Suc_n_OG'）[0].childNodes[3].childNodes[1]==null）{
log（'test3'）；
document.getElementsByClassName（'Suc_n_OG'）[0].style.display='none'；
}
}
}
函数makenames（）{
风险值发起人=[]；
风险值=[]；
对于（var i=0；ib[1]-a[1]）；
返回名称；
}
函数makelinks（）{
for（让ogsucname的[key，value]{
var节点=文档。
const dir = "./submissions/";
var filenames = [];

function testAjax() {
  return $.ajax({
    url: "php/getfilenames.php",
  });
}
var promise = testAjax();
var ogsucname = new Map();
console.log(window.screen.width);
$(document).ready(function() {
  promise.success(function(data) {
    filenames = data.split(',');

    if (!window.location.hash) {
      window.location.href = 'index.html#Home';
    }
    if (window.location.hash) {
      if (window.location.hash.indexOf('Home') == 1) {
        ogsucname = makenames();
        console.log(ogsucname);
        makelinks();
      } else {
        var name = window.location.hash;
        name = name.replace("#", "");
        document.getElementsByClassName('Person_Page')[0].innerHTML = name + "'s Page";
        document.getElementsByClassName('Suc_n_OG')[0].childNodes[1].childNodes[1].innerHTML = "";
        document.getElementsByClassName('Suc_n_OG')[0].childNodes[1].childNodes[1].innerHTML = "Completed By " + name;
        document.title = name + "'s submissions";
        for (var i = 0; i < filenames.length; i++) {
          if (filenames[i].toLowerCase().indexOf(name) > -1) {
            var node = document.createElement("li");
            var button = document.createElement("button");
            var pic = document.createElement("img");
            pic.src = "submissions/" + filenames[i];
            button.setAttribute('onclick', 'tobig(this)');
            button.appendChild(pic);
            node.appendChild(button);
            if (filenames[i].split('_')[2] == null) {
              document.getElementsByClassName('Just_Suc')[0].childNodes[3].appendChild(node);
            } else if (filenames[i].toLowerCase().split('_')[0] == name) {
              document.getElementsByClassName('OG_n_Suc')[0].childNodes[3].appendChild(node);
            } else {
              document.getElementsByClassName('Suc_n_OG')[0].childNodes[3].appendChild(node);
            }
          }
        }
        if (document.getElementsByClassName('Just_Suc')[0].childNodes[3].childNodes[1] == null) {
          console.log('test1');
          document.getElementsByClassName('Just_Suc')[0].style.display = 'none';
        }
        if (document.getElementsByClassName('OG_n_Suc')[0].childNodes[3].childNodes[1] == null) {
          console.log('test2');
          document.getElementsByClassName('OG_n_Suc')[0].style.display = 'none';
        }
        if (document.getElementsByClassName('Suc_n_OG')[0].childNodes[3].childNodes[1] == null) {
          console.log('test3');
          document.getElementsByClassName('Suc_n_OG')[0].style.display = 'none';
        }
      }
    }

    function makenames() {
      var originators = [];
      var successors = [];
      for (var i = 0; i < filenames.length; i++) {
        var ogname = filenames[i].slice(0, filenames[i].indexOf("_")).toLowerCase();
        ogname = ogname.replace(".pn", "");
        originators.push(ogname);
        var sucname = filenames[i].split('_')[2];
        if (sucname != null) {
          var name = sucname.slice(0, sucname.indexOf("."));
          var lowername = name.toLowerCase();
          successors.push(lowername);
        }
      }
      var originators = [...new Set(originators)];
      console.log(originators);
      var tempmap = new Map();
      for (var i = 0; i < originators.length; i++) {
        var count = successors.reduce(function(n, val) {
          return n + (val === originators[i]);
        }, 0);
        tempmap.set(originators[i], count);
      }
      var contnames = new Map([...tempmap.entries()].sort((a, b) => b[1] - a[1]));
      return contnames;
    }

    function makelinks() {
      for (let [key, value] of ogsucname) {
        var node = document.createElement("li");
        var link = document.createElement("a");
        var textnode = document.createTextNode(key);
        link.href = 'javascript:pageredirect('+key+')';
        link.id = key;
        node.id = key + "listitem";
        link.setAttribute('onclick', "pagegen(this)");
        link.appendChild(textnode);
        node.appendChild(link);
        document.getElementById('buddy_load').appendChild(node);
        const style = document.createElement('style');
        var iconspath = "icons/axe_" + value + ".gif"
        var iditer = "#" + key + "listitem";
        style.textContent = iditer + "::before{content:''; display: flex;flex-direction: row;  height: 30px; width: 30px; background:url(" + iconspath + ") no-repeat; background-size: 30px; position:relative;margin-right: 20px;z-index:0;}";
        document.getElementById(key).append(style);
      }
    };

    function pagegen(obj) {
      window.location.href = 'buddypresent.html#' + obj.id;
    }

    function tobig(obj) {
      var getpic = obj.children[0].src;
      var bigimageload = document.getElementsByClassName("activate");
      var ogbox = document.getElementsByClassName("ogname");
      var sucbox = document.getElementsByClassName("sucname");
      var getnames = getpic.substring(getpic.lastIndexOf("."), getpic.lastIndexOf("/")).replace("/", "").toLowerCase();
      var getog = getnames.split('_')[0];
      var getsuc = getnames.split('_')[2];
      makenamelink(getog, ogbox[0]);
      makenamelink(getsuc, sucbox[0]);
      var getimageframe = document.getElementsByClassName("largeimageload");
      var pic = document.createElement("img");
      getimageframe[0].innerHTML = "";
      pic.src = getpic;
      bigimageload[0].style.display = 'block';
      getimageframe[0].appendChild(pic);
    }


  });
});
$(window).load(function() {
  if (window.location.hash) {
    if (window.location.hash.indexOf('Home') == 1) {
      document.getElementsByClassName('loader')[0].style.visibility = "hidden";
      document.getElementById("buddy_load").style.visibility = "visible";
    } else {
      var imgs = document.getElementsByTagName('img');
      var len = imgs.length;
      console.log(len);
      var counter = 0;
      for (var i = 0; i < imgs.length; i++) {
        if (imgs[i].complete) {
          incrementCounter();
        } else {
          imgs[i].addEventListner('load', incrementCounter, false);
        }
      }
    }
  }
  function incrementCounter() {
    counter++;
    if (counter == len) {
      document.getElementsByClassName('loader')[0].style.visibility = "hidden";
      document.getElementsByClassName("ContestantContent")[0].style.display = "block";
    }
  }
});

function closetobig() {
  var bigimageload = document.getElementsByClassName("activate");
  bigimageload[0].style.display = 'none';
}

function tobig(obj) {
  var getpic = obj.children[0].src;
  var bigimageload = document.getElementsByClassName("activate");
  var ogbox = document.getElementsByClassName("ogname");
  var sucbox = document.getElementsByClassName("sucname");
  var getnames = getpic.substring(getpic.lastIndexOf("."), getpic.lastIndexOf("/")).replace("/", "").toLowerCase();
  var getog = getnames.split('_')[0];
  var getsuc = getnames.split('_')[2];
  makenamelink(getog, ogbox[0]);
  makenamelink(getsuc, sucbox[0]);
  var getimageframe = document.getElementsByClassName("largeimageload");
  var pic = document.createElement("img");
  getimageframe[0].innerHTML = "";
  pic.src = getpic;
  bigimageload[0].style.display = 'block';
  getimageframe[0].appendChild(pic);
}

function makenamelink(name, box) {
  box.innerHTML = "";
  if (name != null) {
    var para = document.createElement("p");
    // para.href = "#";
    var paranode = document.createTextNode(name);
    // para.id = name;
    // para.setAttribute('onclick', "pageredirect(this)");
    // para.appendChild(paranode);
    box.innerHTML = name;
    box.parentNode.id = name;
    box.parentNode.setAttribute('onclick', "pageredirect(this)");
    // box.appendChild(name);
  }
}

function pageredirect(obj) {
  window.location.href = 'buddypresent.html#' + obj.id;
  window.onhashchange = function() {
    window.location.reload(true);
  }
}

function reloadpage() {
  // window.location.reload(false);
  window.location.reload(true)
}

function gohome() {
  window.location.href = 'index.html#Home';
}