javascript - Javascript：无法添加延迟和加载功能

Question

我有以下代码，它使用 pause 在下面的 div 中显示单击的图像JS。我想添加一些延迟，在此期间我在屏幕上显示加载器/微调器几秒钟，然后显示图片。但是我遇到了一个问题，当我单击图像加载器时会出现一秒钟（无论延迟毫秒，例如 5000），然后图像加载到浏览器中，而不是那里div，下面是我的目标部分的 HTML 代码。

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");

    placeholder.setAttribute("src",source);

    if (!document.getElementById("imageDescription")) return false;

    if (whichpic.getAttribute("title")) {
      var text = whichpic.getAttribute("title");
    } else {
      var text = "";
    }
    var imageDescription_p = document.getElementById("imageDescription_p");
    var imageDescription_d = document.getElementById("imageDescription_d");

    var imageDescription = document.getElementById("imageDescription");
    if (imageDescription.firstChild.nodeType == 3) {
      imageDescription.firstChild.nodeValue = text;
      // imageDescription_p.textContent=prob;
      imageDescription_d.innerHTML=test
      imageDescription_d2.innerHTML=test1
    }
    document.getElementById('placeholder').style.display='block'

    document.getElementById('loading').style.display = 'none';


    // if (imageDescription_p.firstChild.nodeType == 3) {
    //   imageDescription_p.firstChild.nodeValue = text;
    // }
    return false;
  }

  function preparePlaceholder() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","./img/resources/neutral_1.jpg");
    placeholder.setAttribute("alt","your image goes here");
    placeholder.style.padding='20px'
    placeholder.style.marginBottom='50px'

    var description = document.createElement("p");
    description.setAttribute("id","description");

    var desctext = document.createTextNode("Choose an image");
    description.appendChild(desctext);

    var imageDescription= document.createElement('h1');
    imageDescription.setAttribute("id","imageDescription");

    var imageDescription_p= document.createElement('p');
    imageDescription_p.setAttribute("id","imageDescription_p");

    var imageDescription_d= document.createElement('div');
    imageDescription_d.setAttribute("id","imageDescription_d");

    var imageDescription_d2= document.createElement('div');
    imageDescription_d2.setAttribute("id","imageDescription_d2");


    var desctext = document.createTextNode("");
    imageDescription.appendChild(desctext);

    var heading= document.getElementsByTagName('h3')
    var gallery = document.getElementById("imagegallery");

    // insertAfter(description,heading);
    insertAfter(description,gallery)
    insertAfter(placeholder,description);
    insertAfter(imageDescription,placeholder);
    insertAfter(imageDescription_p,imageDescription);
    insertAfter(imageDescription_d,imageDescription_p);
    insertAfter(imageDescription_d2,imageDescription_d);
  }

  function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for ( var i=0; i < links.length; i++) {
      links[i].onclick = function() {

      document.getElementById("imagegallery").style.display='none'
      document.getElementById('placeholder').style.display='none'


      document.getElementById('loading').style.display = 'block';

      // document.getElementById('placeholder').style.display = 'none';
      // setTimeout(calculateResults, 2000);
      // e.preventDefault();
      // return setTimeout(showPic(this), 2000)
        // return showPic(this);
        setTimeout(()=>showPic(this),5000)
      }
    }
  }
    addLoadEvent(preparePlaceholder);
  addLoadEvent(prepareGallery);

<div id="content">
    <h3>Select Images Below</h3>
    <ul id="imagegallery">
      <li>
        <a href="./img/team/t1.jpg" title="Black Man in Glasses" >
          <img src="./img/team/t1.jpg" alt="the band in concert" height="75px" width="75px" />
        </a>
      </li>
      <li>
        <a href="./img/team/t2.jpg" title="Black Man in Glasses" >
          <img src="./img/team/t2.jpg" alt="the band in concert" height="75px" width="75px" />
        </a>
      </li>
      <li>
        <a href="./img/team/t3.jpg" title="Brown Women">
          <img src="./img/team/t3.jpg" alt="the guitarist" height="75px" width="75px" />
        </a>
      </li>
      <li>
        <a
         href="./img/team/t4.jpg" title="White Women">
          <img src="./img/team/t4.jpg" alt="the audience" height="75px" width="75px" />
        </a>
      </li>
    </ul>
    <div id="loading">
        <img src="img/loading.gif" alt="">
      </div>
  </div>

如果您对我的代码版本感到困惑，可以查看此处。我在这里使用相同的代码和流程，除了我想实现加载器/微调器和隐藏（点击后隐藏 ul 图像）功能。

标签： javascripthtmlcss

Answer 1

您正在创建的占位符元素正在文档中创建：

var placeholder = document.createElement("img");

您需要div在 html 代码中放置要显示图像的位置，然后可以将占位符图像附加到该位置div：

document.getElementById('id of the div you insert').appendChild('block you want to insert')