naturalWidth 和 naturalHeight 使用 onload 事件返回 0

Question

I have read countless of answers of this issue and I came up with the following, but it doesn't work either.

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");

To summarise, the problem is the event onload triggers before the images are loaded (or that is how I understand it).

Another things to add:

• I don't know at first the dimensions of the parent nor the child, because they varied depending of their position on the page.
• I don't want to use jQuery.
• I tried with another function, changing the onload event to window , and it worked, but it takes a lot of time to resize because it waits for everything to load, making the page appear slower, that's how I came to the conclusion the problem has something to do with the onload event.

EDIT:

I made a fiddle, easier to look at the problem this way https://jsfiddle.net/whn5cycf/

Answer 1

for some reason the function fires before aplying a src to imgCache

Well, the reason is that you are calling the function immedeatly:

  imgCache[a].onload = function () {

  }(a);
// ^^^ calls the function

You call the function and assign undefined (the return value of that function) to .onload .

If you want to use an IIFE to capture the current value of a , you have to make it return a function and accept a parameter to which the current value of a is assigned to:

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

Have a look again at JavaScript closure inside loops – simple practical example .