Question

我有以下代码，该代码使用暂停dict = {} dict['details'] = serializer.data dict['other'] = someotherdata return Response(dict)在下面的div中显示单击的图像。我想增加一些延迟，在此期间我会在屏幕上显示装载机/旋转器几秒钟，然后显示图片。但是我遇到了一个问题，当我单击图像加载器时，会出现一秒钟（无论延迟ms是5000），然后图像加载到浏览器中，而不是JS，下面是我在第I部分的HTML代码定位。

div

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

如果您对我的代码版本感到困惑，可以查看here。我在这里使用相同的代码和流程，除了我要实现加载器/旋转器和隐藏（单击后ul图片被隐藏）功能。

Answer 1

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

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

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

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

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

1 个答案: