Php 我可以在显示之前从jquery中获取图像高度吗？

我从PHP返回的json数据中加载了大约50个图像。为了避免PHP获取图像大小的额外调用，我希望在客户端执行此操作。这可能吗

下面是我当前构建图像列表的jquery调用：

// Create HTML for the images.
var html = '';

$.each(data.profiles, function() {

    // Can I determine the img height or do I need to wait until the image is loaded?

    html += '<a href="/view_profile.php?id='+this.user_id+'">';
    html += '<img src="'+this.file_name+'" width="200" height="" style="border:0;">';
    html += '</a><br>';

});

//为图像创建HTML。
var html=''；
$.each（data.profiles，function（）{
//我可以确定img高度还是需要等待图像加载？
html+='
'；
});

您可以绑定映像的加载事件，并在客户端加载映像时获得它，如下所示：

$.each(data.profiles, function() {

    // Can I determine the img height or do I need to wait until the image is loaded?

    html += '<a href="/view_profile.php?id='+this.user_id+'">';

    var image = new Image();  
    image.src = this.file_name;
    image.onload = function() {
        var height = image.height;
    };

    var img = $("<img/>").css('border', 0).prop('src', image.src);
    html += img.wrap('<div></div>').html();
    html += '</a><br>';
});

$.each（data.profiles，function（）{
//我可以确定img高度还是需要等待图像加载？
html+='
'；
});

您可以绑定映像的加载事件，并在客户端加载映像时获得它，如下所示：

$.each(data.profiles, function() {

    // Can I determine the img height or do I need to wait until the image is loaded?

    html += '<a href="/view_profile.php?id='+this.user_id+'">';

    var image = new Image();  
    image.src = this.file_name;
    image.onload = function() {
        var height = image.height;
    };

    var img = $("<img/>").css('border', 0).prop('src', image.src);
    html += img.wrap('<div></div>').html();
    html += '</a><br>';
});

$.each（data.profiles，function（）{
//我可以确定img高度还是需要等待图像加载？
html+='
'；
});

试试这个：-

<img alt="photo-current" src="images/galleries/1/photo_1.jpg" id="photo-current"/>

<script type="text/javascript"> 
jQuery(document).ready(function($) {
      $("#photo-current").load(function() {
            var imageHeight = $(this).height();
            alert("image height " + imageHeight );
      });
});
</script>

jQuery（文档）.ready（函数（$）{
$（“#光电流”）.load（函数（）{
var imageHeight=$（this.height（）；
警报（“图像高度”+图像高度）；
});
});

试试这个：-

<img alt="photo-current" src="images/galleries/1/photo_1.jpg" id="photo-current"/>

<script type="text/javascript"> 
jQuery(document).ready(function($) {
      $("#photo-current").load(function() {
            var imageHeight = $(this).height();
            alert("image height " + imageHeight );
      });
});
</script>

jQuery（文档）.ready（函数（$）{
$（“#光电流”）.load（函数（）{
var imageHeight=$（this.height（）；
警报（“图像高度”+图像高度）；
});
});

您是在询问文件大小还是尺寸？尺寸，所有图像宽度都是200像素，但高度不同？您是在询问文件大小还是尺寸？尺寸，所有图像宽度都是200像素，但高度不同这似乎是一个合理的解决方案，但我尝试时没有加载图像。警报显示“0”警报的高度（“高度：+height”）@保罗。。我更新了我的答案，它创建了一个

图像

对象

，并绑定到

onload

。这应该行得通。我已经在现有的代码，因为我们说话。谢谢，我会给它一个尝试。好奇的是，为什么要将img标签包装在div元素中？@Paul。我之所以将其包装在

中，是因为

html（）

函数，它返回当前

对象的
innerHTML
。这似乎是一个合理的解决方案，但尝试时没有加载图像。警报显示“0”警报的高度（“高度：+height”）@保罗。。我更新了我的答案，它创建了一个
图像
对象
，并绑定到
onload
。这应该行得通。我已经在现有的代码，因为我们说话。谢谢，我会给它一个尝试。好奇的是，为什么要将img标签包装在div元素中？@Paul。我之所以将其包装在
中，是因为
html（）
函数，它返回当前
对象的
innerHTML
。