.img的Javascript img多个.src

Question

我可以这样做吗？

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

    });
};

Answer 1

这是一个好方法

不会。src几乎会立即被覆盖，只有最后一个URL会在onload注册

---

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

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

Answer 2

实际上，您只是在下一行更新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 。

Answer 3

Image对象引用单个<img src=""/>标记。 以这种方式更改src不会给图像加载时间。 最好创建3个图像对象并等待所有3个onload函数被调用，然后再执行所需的操作。