如何从 jquery json 解析中获取图像大小？答案

【问题标题】：how to get image size from a jquery json parse?如何从 jquery json 解析中获取图像大小？
【发布时间】：2012-04-20 23:53:16
【问题描述】：

如何从 jquery json 解析中获取图像大小？我放了一个each function，首先将所有图像下载到html部分然后尝试使用width()和height()来调整图像大小，但是在获取width()和height()之前遇到了一些麻烦图像加载。

http://jsfiddle.net/7eLj4/中的示例代码

jQuery 代码：

$(document).ready(function(){
    var data = '[{"image":"http:\/\/pcdn.500px.net\/6269271\/a85b2995b4d80748831492be5e8a3689895a2b0e\/4.jpg"},{"image":"http:\/\/pcdn.500px.net\/5953805\/d0dd841969187f47e8ad9157713949b4b95b3bda\/4.jpg"},{"image":"http:\/\/pcdn.500px.net\/5735750\/0dd26cb9f53b7bbbedf1b65c0d0aac013f77466c\/4.jpg"}]';
    var obj = $.parseJSON(data);
    $.each(obj, function(index,item) {
       $('#imagewrap').append('<img class="images" src="'+item.image+'" />');         
    });
    $('.images').each(function(){
        var width = $(this).width();
        var height = $(this).height();
        var imgsrc = $(this).attr('src');
        alert(width+''+height+''+imgsrc);           
    });   
});

HTML代码：

<div id="imagewrap"></div>

【问题讨论】：

标签： jquery json image-size

【解决方案1】：

绑定图片加载事件：

$('.images').bind('load', function () {
  // do something here
});

这是您更新的小提琴以演示：http://jsfiddle.net/7eLj4/5/

【讨论】：

【解决方案2】：

从每个图像的onload 函数调用访问图像的.width() 和.height() 的函数。图片下载完成后会调用onload。

myImage.onload = function() {
    var accurateWidth = myImage.width();
}

【讨论】：