For inside function [duplicate]

Question

This question has already been answered:

Show pictures by size div 1 answer

Why the alert('imageh:'+imageheight); although there is an alert('result:'+result); before it alert('result:'+result); ?

The main question as a result to bring to the imgeheight ?

 var result = 1; for (var i = 1; i <= result; i++) { var img = document.createElement('img') img.src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"; img.onload = function() { $('.left').append(this); result = this.height; alert('result:' + result); } var imageheight = result; alert('imageh:' + imageheight); }

 img { width: 10%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left"></div>

Mr. Black Mr. Black 3,324 one 9 31 · Answer 1 · 2016-07-19T20:53:22

Potmou that img.onload asynchronous function.
There are callback functions for this.

 var result = 1; for(i = 1; i <= result; i++) { img = new Image(); img.src ="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"; function getHeight(i, c) { img.onload = function() { $('.left').append(this); c(this.height); console.log('result:', this.height); } } getHeight(img, imageheight => { console.log('imageh:', imageheight); }); }

 img { width: 10%; }

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <div class="left"></div>

I will try to explain this way: I have a div(template) I need to put a lot of how much the image fits.
In this way: when for the first time for scrolls I need to get the size of the image, then divide it by the size of the div(template) As a result, I get the number of how many images I need to transfer to the result result = imagefirstheigh;
as a result, the value of result changes to the value of the number of images. and for scrolls until the number of images.
In one of them I gave an answer and asked if such an answer would go.
You cannot get the actual size of the image until it is loaded and You cannot get the size of the <img> element until the image is inserted into the document
So I say when the first image is displayed, we get its size divisible by div and transfer it to `result , далее result` scrolls further.

Mihanik71 Mihanik71 3,200 12 32 · Answer 2 · 2016-07-19T20:27:45

A piece

 alert('result:'+result)

It is executed at that moment when the image is loaded (the image starts loading on the “img.src” line and the next line we hang on it is a loading wait event), and the execution of the line

 alert('imageh:'+imageheight)

will start immediately after the page loads.

Answer 3 · 2016-07-19T20:28:04

alert('result:'+result); will be displayed only after the image is loaded ( onload ). The interpreter will not wait for the event and executes the code below immediately.

How to withdraw - you can use the Promise :

 var result = 1; for (var i = 1; i <= result; i++) { new Promise((resolve, reject) => { // Оборачиваем в обещание var img = document.createElement('img') img.src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"; img.onload = function() { $('.left').append(this); resolve(this.height); // Как только загрузится картинка, разрешаем обещание положительно и передаем в качестве аргумента результат } }).then(result => { // Как только результат будет найден, вызовется эта функция с результатом var imageheight = result; alert('imageh:' + imageheight); }); }

 img { width: 10%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left"></div>

I changed .then(imgh => { result = imgh; I give the resulting resolution to the var result as a result of the for should scroll by the number of the height of the picture. result just exactly scrolls once. Why?
When the promise is resolved (not before the onload , of course), only then the result change.
The first loop passes, a Promise is created, the second iteration is not checked, because
So the main question as a result to bring to the imgeheight?
I just need to when the first image is displayed, take its size and insert it into the result approximately: result = imageheight;

For inside function [duplicate]

Reported as a duplicate by Sauron , Bald , Denis , aleksandr barakin , user194374 participants on Jul 20 '16 at 6:51 am .

3 answers 3

More articles: