Execute jquery function after image has loaded on window resize

Question

I have the following javascript function:

function reglare(){
    alert("Inaltime imagine= "+$(".slider img").height());
}

I call the function on window resize, like this:

$(window).resize(function(){
    reglare();
});

Most of the times the output is the image height, but sometimes the output is 0.

How can I fix this in order to get the actual image size on window resize ALL the times?

LATER EDIT: why do I need this?

The code is like this:

<div id="slideshow" class="latime_100">

        <img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>

        <div id="slider_1" class="slider" >

            <img src="../poze/imagine_slide1_iul_fade.png"></img>


        </div>

        <div id="slider_2" class="slider">

            <img src="../poze/imagine_slide2_iul_fade.png"></img>


        </div>

        <div id="slider_3" class="slider">

            <img src="../poze/imagine_slide3_iul_fade.png"></img>


        </div>

        <img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
    </div>

I have a container div slideshow which is position relative containing more absolute positioned divs. Because they are position absolute, the container does not extend with content so what is below gets overlapped.

Here's a fiddle: https://jsfiddle.net/g6ppqxLf/5/

TO DISPLAY THE ERROR I HAVE IN THE FIDDLE: just resize the browser a few times and follow the alert message: it will sometimes output 0.

how many elements with classes `.slider img` are in the document? — messerbill, Jul 10 '15 at 13:11
use `console.log` instead of `alert`, and monitor your console while resizing. (hit f12 in browser) it will be a lot easier to see whats going on — andrew, Jul 10 '15 at 13:11
There are three .slider absolute positioned divs and each of them contains one image. So there are three images. — Hello Lili, Jul 10 '15 at 13:11
You could try implementing the approach in this answer http://stackoverflow.com/a/4541963/1370442 — Luke Baughan, Jul 10 '15 at 13:12
@HelloLili But `$(".slider img").height()` will return only height for first matched element. Anyway, you would have better to explain why would you need to check for images height on window resize, i guess there is better way of doing it, CSS media queries maybe — A. Wolff, Jul 10 '15 at 13:13
@A.Wolff The images have the same size so only the first one is fine — Hello Lili, Jul 10 '15 at 13:15
@HelloLili Ok but you didn't answer question, why would you need that? — A. Wolff, Jul 10 '15 at 13:17
@A.Wolff I have a position relative container having the id slidesow. Inside of it there are the position absolute divs having the class slider, each of them containing one image. I have some other div UNDER the div slideshow, but the slideshow div's height does not extend with content (of course because it contains absolute positioned divs). So the content under it overlapps unless I give it the height of the image. — Hello Lili, Jul 10 '15 at 13:19
It would help if you could provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — gfullam, Jul 10 '15 at 13:21
@HelloLili Thx for the update. Firstly `img` is void element, there is no closing tag but this isn't related to your issue. Now regarding your issue, i guess you want to resize image when window is resized?! Otherwise, just use image onload event, not window resize. Providing a jsFiddle would help to see it better what is the expected behaviour. — A. Wolff, Jul 10 '15 at 13:26
@HelloLili But that's because a hidden image returns 0 as height, this is expected behaviour. And like said, `$(".slider img").height()` will return height for only first image. Fixed jsFiddle, use `math.max` and the console, because `alert()` isn't a debug tool: https://jsfiddle.net/g6ppqxLf/6/ — A. Wolff, Jul 10 '15 at 13:52

score 0 · Answer 1 · answered Jul 10 '15 at 13:15

the jquery class selector returns an array.

https://api.jquery.com/class-selector/

function reglare(){
  for (var i = 0; i < $("img.slider").length; i++){
    alert($("img.slider")[i].attr("height");
  }
}

this alerts the attribute height of each image with class .slider

hope this is what you searched for

Execute jquery function after image has loaded on window resize

1 Answers1