使用 jquery 获取图像的本机高度答案

【问题标题】：Get native height of image using jquery使用 jquery 获取图像的本机高度
【发布时间】：2012-02-13 00:29:34
【问题描述】：

我正在尝试创建一个使用 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-burns 滑下效果......

【问题讨论】：

仅供参考，您可以使用：var img = Math.floor(Math.random()*108) + ".JPG"; 而不是从字符串数组中获取字符串。你甚至不需要那个数组。
要获取图像的高度，您必须等待它成功加载。您可以使用 .onload(fn) 处理程序或 jQuery 的 .load() event。
您可能需要重新检查您的代码。我可以看到很多错误的东西，比如使用 jQuery .html() 清空样式标签来添加动态样式？或者仍然使用document.getElementById，如果你可以在jQuery中做$('#element-id')？还是使用循环来生成那个长数组？
顺便说一句，$(document).ready(function() 已经做了你想让window.onload() 处理的所有事情，所以它是多余的。
我同意@fskreuz。要从 jQuery 引用中快速访问 DOM 元素，您只需执行 $("#show")[0]

标签： jquery html css image width

【解决方案1】：

试试这个

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

【讨论】：

OP 正在生成随机图像 src，而不是从现有图像的 src。就像myImg.src = img; 其中img = {randomNumber}.JPG
即使图像被隐藏，上述方法也能正常工作。您必须使用标准 js this.width 而不是 jQuery .width() 因为 jQuery 获取 DOM 元素的宽度而不是实际图像。

【解决方案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();
});

【讨论】：

谁能给我一个如何使用 .animate() 为顶部设置动画的示例：，如果你还没有准备好，我对 jQuery 很陌生......哈哈
.animate() 做了什么来缓慢地将对象从当前样式转换为指定样式。比如如果你的#show 有top:0px 和position:absolute。如果我做了$('#show').animate({top:100,left:200},5000,function(){alert('hi!')})，它将在 5000 毫秒（5 秒）内将图像从原始位置向下移动（滑动）100 像素并向右移动 200 像素，并警告“嗨！”动画结束时。
现在唯一的问题是有时它会从页面顶部向下滑动，我需要它始终从底部向上滑动...我尝试在动画完成时添加$("show").css("top","0px");，但它没有不行……
$("#show").css("top","0px") - 如果您使用其 ID 引用它，则需要“#”。或者，如果您尝试使用变量中已经存在的变量show.css("top","0px")。您能否编辑您的问题，以便描述您想要的效果？以便其他人可以弄清楚而不是尝试理解代码。以便未来的研究人员可以轻松找到它:)
你可能想看看这个问题stackoverflow.com/questions/7719553/…和这个网站nivo.dev7studios.com

【解决方案3】：

这似乎工作正常：

http://jsfiddle.net/YVwZZ/

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

【讨论】：

这将为您提供屏幕上图像的高度。如果您想获得原始图像大小，则必须创建一个 Image 对象并在加载时获取其大小...查看我的答案

【解决方案4】：

顺便说一句。这个

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

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

试试这个

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

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

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

【讨论】：

该语句是一个只有数字的数组。最后有一个 split() 函数。在萤火虫控制台试一试
授予...这行对我来说太长了
我对数组的主要问题是它是一个可预测的整数序列，因此可以很容易地在循环中以编程方式生成，而不必手动输入。