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

中注册

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

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函数被调用。

Javascript img多个.src for .onload

3 个答案: