Question

So i’ve read a bunch of other solutions for the same issue, but none of them seem to work.

I have a bunch of images, most of which are hidden when the page loads. Only the first image is visible. What i need to do is give them a negative top margin to center the image vertically. The only problem is, the code i have now is very inconsistent and only works every now and then. I’m actually not sure if it’s my code or if the image is being cached or something.

This is what i’ve got:

$('#frontpage-sidebar-slideshow img').each(function(i, v) {

    // I read that preloading the images would solve the problem, but this doesn't do anything
    //var src = $(this).attr('src');
    //$('<img/>')[0].src = src;

    // First make parent .slide visible to be able to get the image dimentions (not possible if image is invisible)
    var showAfter = false;
    if(!$(this).parent('.slide').is(':visible')) {
        showAfter = true;
        $(this).parent('.slide').css({ // .show() might also work
            display: 'block',
            visibility: 'visible',
            opacity: 1
        });
    }

    // Get dimentions
    var wrapHeight = parseInt($('#frontpage-sidebar-slideshow').height(), 10) + 20;
    var imgHeight = $(this).height();
    var offset = Math.ceil((wrapHeight - imgHeight) / 2);

    // Set offset if needed
    if(imgHeight > wrapHeight) {
        $(this).css('margin-top', offset);
    }

    // Show image again if needed
    if(showAfter) {
        $(this).parent('.slide').show();
    }
});

I’m using SlidesJS to create a slideshow of the images. HTML formatting looks like this:

   <div class="slide">
    <a href="url goes here">
        <img width="200" src="image src goes here" alt="" style="">
        <div class="overlay">
            <p class="title"> Some title </p>
            <p> Some content </p>
            <p> More content </p>
        </div> <!-- overlay -->
    </a>
    </div>
   <div class="slide" style="display: none;"> <!-- Only the first image is visible, so this one will be hidden -->
    <a href="url goes here">
        <img width="200" src="image src goes here" alt="" style="">
        <div class="overlay">
            <p class="title"> Some title </p>
            <p> Some content </p>
            <p> More content </p>
        </div> <!-- overlay -->
    </a>
    </div>

There are two problems:

1) The first image gets very inconsistent height results. Sometimes i get the wrapper value (height of .slide) and sometimes i get the actual height value. I have no idea what’s causing this.

2) No matter what i do, i only get a height value for the first image. The rest of the images just return 0. Yup, they don’t even return the wrapper height (height of .slide) which is strange.

Any ideas?

Update I just realised that snice both SlidesJS and my script runs on pageload, they might be colliding (i’m trying to display the images, get their sizes, then hide them, while SlidesJS want to hide all of them except the first one), so i tried wrapping the entire script above in a setTimeout(code, 300) and now it at least seems to give me consistent results for the first image, but the rest of the images still return 0.

Answer 1

You can examine the image outside the DOM:

var tmp = new Image()
tmp.src="http://i.imgur.com/vdDQgb.jpg" <-- set to the image path you're using.
alert(tmp.height)

To make sure the image has loaded, hook up an onload event before specifying the SRC.

var tmp = new Image()
tmp.onload=function() {alert(tmp.height)};
tmp.src="http://i.imgur.com/vdDQgb.jpg";