jQuery/javascript-加载前获取图像大小

jQuery/javascript-加载前获取图像大小,javascript,jquery,Javascript,Jquery,我有一个上传后作为缩略图呈现的图像列表。我的问题是,我需要完整上传图像的尺寸,以便在尺寸不正确时可以运行调整大小功能 构建图像列表的函数 function buildEditList(json, galleryID) { //Hide the list $sortable = $('#sortable'); $sortable.hide(); for(i = 0, j = json.revision_images.length; i < j; i++) {

我有一个上传后作为缩略图呈现的图像列表。我的问题是,我需要完整上传图像的尺寸,以便在尺寸不正确时可以运行调整大小功能

构建图像列表的函数

function buildEditList(json, galleryID)
{
    //Hide the list
    $sortable = $('#sortable');
    $sortable.hide();

    for(i = 0, j = json.revision_images.length; i < j; i++) {
        $sortable.append(
            "<li id='image_" + json.revision_images[i].id + "'><a class=\"ui-lightbox\" href=\"../data/gallery/"
            + galleryID
            + "/images/album/"
            + json.revision_images[i].OrgImageName
            + "\"><img id=\""
            + json.revision_images[i].id
            + "\" alt=\"\" src=\"../data/gallery/"
            + galleryID 
            + "/images/album/" 
            + json.revision_images[i].OrgImageName 
            + "\"/></a></li>"
        ).hide();
    }
    //Set first and last li to 50% so that it fits the format
    $('#sortable li img').first().css('width','50%');
    $('#sortable li img').last().css('width', '50%');

    //Fade images back in 
    $sortable.fadeIn("fast",function(){
        var img = $("#703504"); // Get my img elem -- hard coded at the moment
        var pic_real_width, pic_real_height;
        $("<img/>") // Make in memory copy of image to avoid css issues
            .attr("src", $(img).attr("src"))
            .load(function() {
                pic_real_width = this.width;   // Note: $(this).width() will not
                pic_real_height = this.height; // work for in memory images.
        });
        alert(pic_real_height);
    });

}
函数buildEditList(json,galleryID)
{
//隐藏列表
$sortable=$(“#sortable”);
$sortable.hide();
对于(i=0,j=json.revision_images.length;i”
).hide();
}
//将第一个和最后一个li设置为50%,使其符合格式
$('#sortable li img').first().css('width','50%);
$('#sortable li img').last().css('width','50%”);
//淡入图像
$sortable.fadeIn(“快速”,函数(){
var img=$(“#703504”);//获取我的img元素——目前是硬编码的
变量pic_real_width,pic_real_height;
$("

我一直在尝试使用这篇文章中的解决方案,但还没有开始工作,或者它可能只是我的代码。如果你对此有任何想法,我可以使用帮助。目前警报未定义。

有一个新的js方法称为naturalHeight或naturalWidth,它将返回你正在查找的信息。不幸的是ly它在旧的IE版本中不起作用。以下是几个月前我创建的一个函数,它可能适用于您。我在下面添加了一些代码作为示例:

function getNatural($mainImage) {
    var mainImage = $mainImage[0],
        d = {};

    if (mainImage.naturalWidth === undefined) {
        var i = new Image();
        i.src = mainImage.src;
        d.oWidth = i.width;
        d.oHeight = i.height;
    } else {
        d.oWidth = mainImage.naturalWidth;
        d.oHeight = mainImage.naturalHeight;
    }
    return d;
}

var img = $("#703504");
var naturalDimension = getNatural(img);
alert(naturalDimension.oWidth, naturalDimension.oHeight)​

听起来像是我要做服务器端的事情。请更具体地说明出什么问题。@标记-当前我的警报(pic real\u width)正在返回未定义。@Jeroen-我考虑在用getimagesize()上传时使用PHP处理这个问题;但这大大降低了上载过程的速度。我不明白为什么这会起作用。至少必须从服务器返回一些东西才能知道宽度/高度。返回将是异步的,而上面的代码编写时就好像是同步的,因此可能会处理浏览器已缓存的图像。但不缓存的情况如何图像?我的所有图像的自然宽度和-高度一直为0。是否有@Beetroot Beetroot的评论?对于未缓存的图像不起作用(或者如果加载图像需要很多时间)