Question

I’m trying to create a function that uses jQuery to get height of image, I have tried everything I can find but nothing works…

$(document).ready(function() {
window.onload = onLoad;

var array = "0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|32|33|34|35|36|37|38|39|40|41|42|43|44|45|46|47|48|49|50|51|52|53|54|55|56|57|58|59|60|61|62|63|64|65|66|67|68|69|70|71|72|73|74|75|76|77|78|79|80|81|82|83|84|85|86|87|88|89|90|91|92|93|94|95|96|97|98|99|100|101|102|103|104|105|106|107".split("|");

function onLoad(){

    $("style").html("");

    var img = array[Math.floor(Math.random()*array.length)] + ".JPG";

    document.getElementById("show").src = img;

    var img_height = $("#show").height();

    var img_hgt = img_height - 238;

    alert(img_hgt);

    $("#show").ready(function() {
        var img_hgt = $("#show").height();
    })

    $("style").html("#show {position:absolute;top:0px;left:0px; -webkit-animation-name:slide_animation; -webkit-animation-duration:5s;} @-webkit-keyframes slide_animation { 0% { top:0px; } 100% { top:"+img_hgt+"px; } }");
    setTimeout(onLoad,2*1000);
}
});

Please help…

What I’m trying to achieve with this animation is a sort of ken-burns slide down effect…

Answer 1

here’s how i did it:

HTML

<img id="show" src="" />

CSS

#show {
    position:absolute;
    top:0px;
    left:0px;
}

JS

//generate array from 0 to 107
var myArray = [];
for (i = 0; i <= 107; i++) {
    myArray.push(i);
}

//look at our array in string form! (comma separated due to  .toString());
alert(myArray.toString());

function loadImages() {

    //url randomizer
    var img = myArray[Math.floor(Math.random() * myArray.length)] + ".JPG";

    //get reference to our HTML "show"
    var show = $('#show');

    //new image
    var myImg = new Image();

    //bind onload to image object
    myImg.onload = function() {

        //check if we got the height
        alert(this.height);

        //animation here. use jQuery .animate() instead!
        //http://api.jquery.com/animate/

        //recurse (loop)
        setTimeout(loadImages, 2 * 1000);
    };

    //set url
    //here's why it should be set after the onload bind
    //http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
    myImg.src=img;
}

//wait for document to load
$(document).ready(function() {
    loadImages();
});