Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Image onload just loads first image in array

Updated with the media array.

I need to get the width and height of som media (images and videos).
I am using a for loop and onload/eventlistner to get this, but if I have more then one media of the same kind, I only get the data of the first one. (I have to use old javascript so no foreach because it will not be used in an ordinary browser)

var imgSrc = 'fallBack.png';
var imgType = 'photo';
var screenW = document.body.clientWidth;
var screenH = document.body.clientHeight;

images = [
  {media: { type: "photo", media: "image1.png" }},
  {media: { type: "photo", media: "image1.png" }}
]
for (var i = 0; i < images.length; i++) {
    var img = new Image();
    img.onload = function() {
       console.log(this); // this just shows for the first image in the list with two images

    //Simplefying what I want out of this
    If(this.width < this.height && screenW < screenH) {
      imgSrc = this.src;
      imgType = "photo"
     };
Tags:

2

Answers


  1. 0

    Just create an array and store the images into it.

    Additionally, removed setTimeout and added a simple counter loadedImagesCount and checkAllImagesLoaded which checks if the counter is equal to the size of images.

    var imgSrc = 'fallback.png';
var imgType = 'photo';
var screenW = document.body.clientWidth;
var screenH = document.body.clientHeight;

var images = [{
    media: {
      type: "photo",
      media: "https://via.placeholder.com/150"
    }
  },
  {
    media: {
      type: "photo",
      media: "https://via.placeholder.com/200"
    }
  },
  {
    media: {
      type: "photo",
      media: "https://via.placeholder.com/250"
    }
  }
];

var imagesArray = [];
var loadedImagesCount = 0;

function checkAllImagesLoaded() {
  if (loadedImagesCount === images.length) {
    console.log("All images loaded:", imagesArray);

    // Logic after all images are loaded:
    for (var i = 0; i < imagesArray.length; i++) {
      var img = imagesArray[i];
      console.log("Image " + i + ": " + img.src + " is " + img.width + "x" + img.height);

      if (img.width < img.height && screenW < screenH) {
        imgSrc = img.src;
        imgType = images[i].media.type;
      }
    }

  }
}

// Load images and update counter
for (var i = 0; i < images.length; i++) {
  (function(index) {
    var img = new Image();
    img.onload = function() {
      imagesArray[index] = img;
      loadedImagesCount++;
      checkAllImagesLoaded();
    };
    img.src = images[index].media.media;
  })(i);
}
    Login or Signup to reply.
  2. 0

    Here is a version that counts the loads and displays when done

    var images = [
  {media: { type: "photo", media: "https://images.unsplash.com/photo-1549778399-f94fd24d4697?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" }},
  {media: { type: "photo", media: "https://images.unsplash.com/photo-1547628641-ec2098bb5812?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" }}
],
len = images.length,
count = 0;

for (let i = 0; i < images.length; i++) {
  images[i].media.image = new Image();
  images[i].media.image.onload = function() {
    images[i].media.dimensions = {
      w: this.width,
      h: this.height
    };
    count++; 
    console.log(this.width < this.height); // whatever you need here
    if (count === len) {
      console.log('DONE!');
    }
  };
  images[i].media.image.src = images[i].media.media;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search