naturalWidth和naturalHeight使用onload事件返回0

Question

我已经阅读了无数关于这个问题的答案，我提出了以下答案，但也不起作用。

function fitToParent(objsParent, tagName) {
    var parent, imgs, imgsCant, a, loadImg;
    //Select images
    parent = document.getElementById(objsParent);
    imgs = parent.getElementsByTagName(tagName);
    imgsCant = imgs.length;
    
    function scaleImgs(a) {
        "use strict";
        var w, h, ratioI, wP, hP, ratioP, imgsParent;
        
        //Get image dimensions
        w = imgs[a].naturalWidth;
        h = imgs[a].naturalHeight;
        ratioI = w / h;
        //Get parent dimensions
        imgsParent = imgs[a].parentNode;
        wP = imgsParent.clientWidth;
        hP = imgsParent.clientHeight;
        ratioP = wP / hP;
        //I left this as a test, all this returns 0 and false, and they shouldn't be 
        console.log(w);
        console.log(h);
        console.log(ratioI);
        console.log(imgs[a].complete);
        if (ratioP > ratioI) {
            imgs[a].style.width = "100%";
        } else {
            imgs[a].style.height = "100%";
        }
    }
    //Loop through images and resize them
    var imgCache = [];
    for (a = 0; a < imgsCant; a += 1) {
        imgCache[a] = new Image();
        imgCache[a].onload = function () {
            scaleImgs(a);
            //Another test, this returns empty, for some reason the function fires before aplying a src to imgCache
            console.log(imgCache[a].src);
            
        }(a);
        imgCache[a].src = imgs[a].getAttribute('src');
    }
}
fitToParent("noticias", "img");

总之，问题是onload在加载图像之前触发的事件（或者我就是这么理解的）。

另一个需要添加的内容：

• 一开始我不知道父母和孩子的尺寸，因为它们根据它们在页面上的位置而变化
• 我不想使用jQuery
• 我尝试使用另一个函数，将onload事件更改为window，它起作用了，但调整大小需要很多时间，因为它等待加载所有内容，使页面看起来更慢，这就是我得出结论的原因具有CCD_ 4事件

编辑：

我做了一把小提琴，这样更容易看问题https://jsfiddle.net/whn5cycf/

Answer 1

由于某些原因，在将src应用于imgCache 之前，函数会触发

原因是您正在立即调用函数：

  imgCache[a].onload = function () {
  }(a);
// ^^^ calls the function

调用该函数并将undefined（该函数的返回值）分配给.onload。

如果你想使用IIFE来获取a的当前值，你必须让它返回一个函数并接受一个参数，a的当前值被分配给这个参数：

imgCache[a].onload = function (a) {
  return function() {
    scaleImgs(a);
  };
}(a);

再来看看循环中的JavaScript闭包——一个简单的实际例子。