0
/*create new node "DIV" in DOM with background got from Image().src object, with properties naturalHeight and naturalWidth... */
function divCreate() {
  div = document.createElement("div");
  div.className = "candy";
  div.style.background = "linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('" + img.src + "') no-repeat";
  div.style.width = block + "px";
  div.style.height = blockres + "px";
  div.style.backgroundSize = "cover";
  div.style.backgroundPosition = "center";
  return div;
}

function imgMaker() {
  /*try to download image to IMAGE() obj and get props of natWidth/height from its own. there is my main headache!!! img ibject takes time to complete download the src image, only then im able to get properties of naturalWidth/Height. but i cannot (i dont have ideas how) to force my function get properties only after Image() object will complete load. Can anyone help? Its seems setTimeOut/setInteval() is useless*/


  var promise = new Promise(function(resolve, reject) {
      img = new Image();
      img.src = arr[i];
      resolve(img);
    })
    .then(function(img, reject) {
      if (img.naturalHeight !== 0 && img.naturalWidth !== 0) {
        return img.naturalHeight, img.naturalWidth;
      } else {
        throw new Error("Please MAKE ME STRAIGHTLY!");
      }
    });
  nHeight = img.naturalHeight;
  nWidth = img.naturalWidth;
  res = nWidth / nHeight;
  console.log("image source: " + arr[i] + ", naturalWidth: " + nWidth + "px, naturalHeight: " + nHeight + "px");
  blockres = width * res;
  return res, img, blockres;
}

function singleGrid() {
  galdiv1.className = galClassList;

  function imgFill() {
    for (i = 0; i < arr.length; i++) {
      imgMaker(arr, i);

      console.log("Width of browser workspace (and background-image too): " + width + "px, image (Width/Height) ratio index: " + res + ", height of bg-image: " + blockres);

      divCreate(blockres);
      galdiv1.append(div);
    }
  }
  imgFill(arr, width);
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
JW Jevaveh
  • 91
  • 11
  • 1
    Add an `onload` event handler to the image you create and get the properties in there. A promise won't really help you. – Rory McCrossan Nov 17 '17 at 14:44
  • `img = new Image(); img.onload=function() { /* has to be before src is changed */ } ; img.src = arr[i];` – mplungjan Nov 17 '17 at 14:45
  • @mplungjan Like this: `img = new Image(); img.onload=function() { /* has to be before src is changed */ return img.naturalHeight, img.naturalWidth; }; img.src = arr[i];` ? seems it doesnt work – JW Jevaveh Nov 17 '17 at 14:55
  • No. It’s async ........... – mplungjan Nov 17 '17 at 14:58
  • @mplungjan Maybe you can explain a bit more? didnt get. how to make right – JW Jevaveh Nov 17 '17 at 15:03
  • `img.onload=function() { var nHeight = this.naturalHeight; var nWidth = this.naturalWidth; var res = nWidth / nHeight; console.log("image source: " + arr[i] + ", naturalWidth: " + nWidth + "px, naturalHeight: " + nHeight + "px"); blockres = width * res; var div= divCreate(blockres); galdiv1.append(div);}` - also get rid of the loop. You need a closure – mplungjan Nov 17 '17 at 15:03
  • @mplungjan Sorry for tooking your time... But how can i try jack off loop or other kind of iteration, and make cycles of load every img.src from array? – JW Jevaveh Nov 17 '17 at 22:27
  • Have a look at masonry – mplungjan Nov 18 '17 at 05:47
  • See, if to try make that on vanilla JS (that i would to) i adding onload event to Image() the Google Inspector says me he got properties of every item it array. but... trying to load each of asyncly. My galllery divs takes Height and Width according to each item, but as img.src is outside eventHandler as my Divs takes only first item for background – JW Jevaveh Nov 18 '17 at 09:46
  • Sorry for annoying you, I only want to get what i missed to make this correct – JW Jevaveh Nov 18 '17 at 09:47

0 Answers0