使用jquery获取图像的原始高度

Question

我正在尝试创建一个使用 jQuery 来获取图像高度的函数，我已经尝试了我能找到的所有方法，但没有任何效果...

$(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);
}
});

请帮助...

我试图通过此动画实现的目标是一种 ken -烧伤滑落效果...

Answer 1

试试这个

var myImg = new Image();
myImg.src = img;
myImage.onload = function() {
    alert(this.width);
};

Answer 2

我是这样做的：

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();
});

Answer 3

这似乎工作正常：

http://jsfiddle.net/YVwZZ/

$(document).ready(function(){
   var imgheight = $('img').height();
   alert(imgheight);
});

Answer 4

顺便提一句。这

array = "0|1|2|..."

不是一个数组。它是一个字符串。如果您尝试使用代码随机输入该字符串，您最终会得到分隔符“|”有时。

试试这个

array = [0,1,2,3,4, ...];

编辑：关于数组的实现一切都很好。我忽略了行尾的 split('|')

array = "0|1|2|...". split('|');