时间戳

首页 > 解决方案 > 仅在 javascript 上加载第一张图片

javascript - 仅在 javascript 上加载第一张图片

问题描述

我有以下代码，我试图在显示包含它们的弹出窗口之前等待加载 3 个图像：

  function displayBase64Image(base64Image,e,map) {
          var counter=0;
          var length=3;

var imagePlaceholder = document.createElement('image-placeholder')
            var image = document.createElement('img');
            var image2 = document.createElement('img2');
            var image3 = document.createElement('img3');



    image.onload = function() {
          imagePlaceholder.appendChild(image);
          counter++;
          if (counter==length)
          {
            showPopup();
          }
    }

    image2.onload = function() {
        imagePlaceholder.appendChild(image2);
        counter++;
        if (counter==length)
        {
           showPopup()
        }
    }

    image3.onload = function() {
      imagePlaceholder.appendChild(image3);
      counter++;
      if (counter==length)
      {
      showPopup();
      }
    }
imagePlaceholder.innerHTML = '<div id="image-placeholder" ><h3 align="center">Seleccione foto a subir</h3><input type="file" font-family: monospace; id="inputFileToLoad" align="center" accept=".jpg,.jpeg,.png" onclick="fileClicked(event)" onchange="fileChanged(event);setFile(this);" width="48"/><h3 align="center"><button type="button" onclick="checkandpost();">Subir foto</button></h3><h3 align="center">Fotos ya subidas</h3></div><div id="imgTest"></div>';
image.src = base64Image;
image2.src=base64Image
image3.src=base64Image


}

但是由于某种原因，唯一执行 onLoad 的图像是 image，image2 和 image3 从不执行它。

这可能是什么原因？

标签： javascript

解决方案

document.createElement('img2')

尝试创建一个<img2>元素，该元素不是有效的 HTML 元素。

将您的代码更改为

var image2 = document.createElement('img');
var image3 = document.createElement('img');

另一方面，您应该将相同的函数传递给每个图像，而不是重新编写。这些方面的东西：

function displayBase64Image(base64Image) {
  var counter = 0;
  var length = 3;

  var imagePlaceholder = document.createElement('div');

  imagePlaceholder.innerHTML = '<div id="image-placeholder" ><h3 align="center">Seleccione foto a subir</h3><input type="file" font-family: monospace; id="inputFileToLoad" align="center" accept=".jpg,.jpeg,.png" onclick="fileClicked(event)" onchange="fileChanged(event);setFile(this);" width="48"/><h3 align="center"><button type="button" onclick="checkandpost();">Subir foto</button></h3><h3 align="center">Fotos ya subidas</h3></div><div id="imgTest"></div>';
  var image = document.createElement('img');
  var image2 = document.createElement('img');
  var image3 = document.createElement('img');

  function onLoad(image) {
    imagePlaceholder.appendChild(image);
    counter++;
    if (counter === length) {
      showPopup();
    }
  }

  image.onload = onLoad(image);
  image2.onload = onLoad(image2);
  image3.onload = onLoad(image3);

  image.src = base64Image;
  image2.src = base64Image;
  image3.src = base64Image;
  document.body.appendChild(imagePlaceholder);
}
// defining empty because you haven't included it
function showPopup(){}
displayBase64Image('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

代码可以进一步改进，但我不知道上下文。

还有一些注意事项：因为您使用的是 base64，所以没有什么要加载的。图像包含在字符串中。

这意味着onload它将立即触发。

这意味着当您设置元素innerHTML时imagePlaceholder，图像已经存在并且您正在用该字符串替换它们。

因此，您可以立即有效地删除图像。我已经通过首先分配innerHTML然后在图像上设置onload和srcs 解决了这个问题。

推荐阅读