Javascript img multiple.src for.onload

我可以这样做吗？

(function (){function init(){
    var imgload = new Image();
    imgload.src = "/loading.gif";
imgload.onload = function(){
    var img = new Image();
    img.src = "/background.jpg";
    img.src = "/logo.png";
    img.src = "/newtab.png";
img.onload = function(){setTimeout(function() {
    var html = document.getElementsByTagName("html")[0];
    html.style.background = "url('/background.jpg') center center fixed";
    html.style.backgroundRepeat = "repeat";
    jQuery(".wrapper").fadeOut(400);
    jQuery(".loading").fadeOut(300);
    jQuery('.bodycontent').fadeIn(400)}, 300)}}}init()})();

我想设置多个.src，这样我就可以执行.onload操作，直到加载.src中的图像为止

这是一个好方法吗？

(function (){function init(){
    var imgload = new Image();
    imgload.src = "/loading.gif";
imgload.onload = function(){
    var img = new Image();
    img.src = "/background.jpg";
    img.src = "/logo.png";
    img.src = "/newtab.png";
img.onload = function(){setTimeout(function() {
    var html = document.getElementsByTagName("html")[0];
    html.style.background = "url('/background.jpg') center center fixed";
    html.style.backgroundRepeat = "repeat";
    jQuery(".wrapper").fadeOut(400);
    jQuery(".loading").fadeOut(300);
    jQuery('.bodycontent').fadeIn(400)}, 300)}}}init()})();

根据答案，我是这样做的：

function imgLoading(url) {
  return new Promise(function(resolve) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
      resolve(img);
    }
  });
}
let images =["/background.jpg","/logo.png","/submittrack.png", "/radio.png"];
var imgLoad = new Image();
imgLoad.src = "/loading.gif";
imgLoad.onload = function(){
    let imageLoadPromises = images.map(imgLoading);
    Promise.all(imageLoadPromises).then(function(images){
        setTimeout(function() {
            var html = document.getElementsByTagName("html")[0];
            html.style.background = "url('/background.jpg') center center fixed";
            html.style.backgroundRepeat = "repeat";
            jQuery(".wrapper").fadeOut(400);
            jQuery(".loading").fadeOut(300);
            jQuery('.bodycontent').fadeIn(400)}, 300)

    });
};

该对象引用单个

标记。以这种方式更改src不会给映像加载时间。最好先创建3个图像对象，然后等待所有3个onload函数被调用，然后再执行您需要执行的操作。

该对象引用单个

标记。以这种方式更改src不会给映像加载时间。最好先创建3个图像对象，并等待所有3个onload函数被调用，然后再执行您需要执行的操作

这是一个好方法吗

否。src几乎会立即被覆盖，并且只有最后一个url会在

onload

---

如果需要知道何时加载所有图像，可以使用Promissions

let images =["/background.jpg","/logo.png","/newtab.png"];

function imgLoad(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
      resolve(img);
    }
    img.onerror = reject
  });
}

// map an array of promises calling imgLoad() for each url
let imageLoadpromises = images.map(imgLoad);

Promise.all(imageLoadpromises ).then(function(images){
   //images is array of image elements from above
   // do something here , they have all loaded

}).catch(function(err){ 
     console.log('One or more images did not load')
});

这是一个好方法吗

否。src几乎会立即被覆盖，并且只有最后一个url会在

onload

---

如果需要知道何时加载所有图像，可以使用Promissions

let images =["/background.jpg","/logo.png","/newtab.png"];

function imgLoad(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
      resolve(img);
    }
    img.onerror = reject
  });
}

// map an array of promises calling imgLoad() for each url
let imageLoadpromises = images.map(imgLoad);

Promise.all(imageLoadpromises ).then(function(images){
   //images is array of image elements from above
   // do something here , they have all loaded

}).catch(function(err){ 
     console.log('One or more images did not load')
});

---

实际上，您只是在下一行更新

img

标记的src，而不是添加多个图像。 下面是一个模拟您实际操作的示例：

var a = 'Good Morning';
a = "Good Night";
a = "Good afternoon";

这里有一个正确方法的基本示例

 var img = new Image();
 img.src = "/newtab.png";
 img.onload = callMeOnLoad;

 var img2 = new Image();
 img2.src = "/background.jpg";
 img2.onload = callMeOnLoad;

 function callMeOnLoad(){
     //Stuff Here
 }

这也不是理想的方法，只是为了解释一个

img

只能占用1个src的事实

---

@charlietfl为此写了一个很好的答案。如果您不知道可以继续在图像URL上循环，并在每个循环上添加新的图像标记，指定

onload

回调和

src

实际上，您只是在下一行更新

img

标记的src，而不是添加多个图像。 下面是一个模拟您实际操作的示例：

var a = 'Good Morning';
a = "Good Night";
a = "Good afternoon";

这里有一个正确方法的基本示例

 var img = new Image();
 img.src = "/newtab.png";
 img.onload = callMeOnLoad;

 var img2 = new Image();
 img2.src = "/background.jpg";
 img2.onload = callMeOnLoad;

 function callMeOnLoad(){
     //Stuff Here
 }

这也不是理想的方法，只是为了解释一个

img

只能占用1个src的事实

---

@charlietfl为此写了一个很好的答案。如果您不知道可以继续在图像URL上循环，并在每个循环上添加新的图像标记，指定

onload

回调和

src

之后有一个小的打字错误（imgLoad），缺少一个右括号

：-）

.Intresting，但我需要img.onload来告诉我何时加载了所有图像。我在img.onload上包装了一个setTimeout函数。它适用于一个映像，但不适用于多个映像。src

Promise.all中的代码。然后，在他们全部加载并解析
onload
callbacks中的每个Promise之前，
init（）
将是Promise.all。您的
onload
中的所有代码都将放在
Promise.All中。然后
@charlietfl看看我的问题。我添加了我尝试的内容。我仍然收到一个错误。在（imgLoad）之后有一个小的输入错误，缺少一个右括号
：-）
。Intresting但是我需要img.onload来告诉我何时加载了所有图像。我在img.onload上包装了一个setTimeout函数。它适用于一个映像，但不适用于多个映像。src
Promise.all中的代码。然后，在他们全部加载并解析
onload
callbacks中的每个Promise之前，
init（）
将是Promise.all。您的
onload
中的所有代码都将放在
Promise.All中。然后
@charlietfl看看我的问题。我添加了我尝试的内容。我仍然得到一个错误。