js图片加载获取不到宽度和高度解决方法总结

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

本文章总结了关于js图片加载获取不到宽度和高度解决方法,有需要的朋友可参考一下。第一次浏览的时候你根本就获取不到图片的宽高值，打印出来都是0，这些纠结了吧，怎么解决呢？

本文章总结了关于js图片加载获取不到宽度和高度解决方法,有需要的朋友可参考一下。

第一次浏览的时候你根本就获取不到图片的宽高值，打印出来都是0，这些纠结了吧，怎么解决呢？就用setTimeout延时加载，200毫秒之后就执行，等图片彻底加载完之后就可以获取宽高了，这样就实现了只适应宽高和水平垂直居中了。

代码

代码如下

var parent=$(".imgshow a img");

parent.click(function(){
//alert(test.width());

var url=$(this).attr("big_show");

var big_i=$(".big_show img");

big_i.attr("src",url);

big_i.hide();

if(big_i.is(":hidden")){

setTimeout(function(){

$(".big_show").show();

big_i.show();

$(".big_show").width(big_i.width());

$(".big_show").height(big_i.height());

var top=-(big_i.height()/2);

var left=-(big_i.width()/2);

$(".big_show").css({"margin-left":left,"margin-top":top});

//alert(left);

                    },200)
                }

            })

实例

只要图片加载完毕时才能获取到加载的图片的宽度和高度，你的意思是再图片加载前显示加载等待图片，然后再显示加载后的图片吧？
只要判断图片是否加载完毕，然后再获取图片属性，下面是个例子

代码如下

*
     * @param sUrl 图片的url
     * @param fCallback 回调函数，fCallback至少有一个类型为object类型的参数用来接收图片的宽、高、url
     *
     * usage:
     * var url = "-05-26/c/c21ff1138e7349859b49b99312d05baf.jpg";
     * FGetImg(url, function(img){alert('width:'+img.width+";height:"+img.height+";url:"+img.url);});
     *
     */
    var FGetImg = function(sUrl, fCallback)
    {
    var img = new Image();
    img.src = sUrl + '?t=' + Math.random();    //IE下，ajax会缓存，导致onreadystatechange函数没有被触发，所以需要加一个随机数
    if (FBrowser.isIE)
    {
        img.onreadystatechange = function()
        {
        if (this.readyState=="loaded" || this.readyState=="complete")
        {
            fCallback({width:img.width, height:img.height, url:sUrl});
        }
        };
    }else if (FBrowser.isFirefox || FBrowser.isSafari || FBrowser.isOpera || FBrowser.isChrome)
    {
        img.onload = function()
        {
        fCallback({width:img.width, height:img.height, url:sUrl});
        };
    }
    else
    {
        fCallback({width:img.width, height:img.height, url:sUrl});
}
};

如果只是获取图片id有还是不准的下面来看另一种方法,你在图片下载完成时，直接获取你新创建的im标签的width属性就可以了，你拿我的给你改过的代码运行一下，我这是能获取得到的

代码如下