加载没有“ new Image（）”的图像

Question

我正在尝试在JavaScript中加载图片：loadImage(src, img) {  return new Promise((resolve, reject) => {    img.onload = resolve;    img.onerror = reject;    img.src = src;  });}在img之前已经建立，但在DOM但不存在。加载后应将其附加。我的问题：据我了解，实际上并不会加载图像，因为该元素还不是DOM的一部分。我尝试使用new Image()，因为这将在插入DOM之前加载图像源：loadImage(src, img) {  return new Promise((resolve, reject) => {    var tmp = new Image();    tmp.onload = resolve;    tmp.onerror = reject;    tmp.src = src;    img.src = src;  });}然而，这样做两次加载，并感到越野车。我需要保留（和使用）该img元素，因为其他事件处理程序和属性已附加到该元素。加载图像并完成承诺后，我该怎么办？

Answer 1

如果我对您的理解正确，那么是否要在加载完成后渲染图像？也许只需在“ loadImage”函数中创建图像，然后在“ onload”中执行适当的附加操作即可。这是我在想的一个例子：

const loadImage = (src, parentEl) => {

const img = document.createElement('img')

img.src = src

img.onload = () => {

  parentEl.appendChild(img)

 }

}

const parentEl = document.getElementById('parent')

loadImage('https://fakeimg.pl/640x360', parentEl)

https://jsfiddle.net/2Lp8hyxf/