Javascript 图像自然宽度返回零

图像自然宽度返回零。。。就这样，为什么

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage.substring(14,17) + '-a.jpg'; 
var width = newimage.naturalWidth;
alert (width);

救命，我不知道为什么

---

***那条路很好，图像显示出来了

我猜这是因为您没有等待图像加载-请尝试以下方法：

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage.substring(14,17) + '-a.jpg'; 
newimage.onload = function()
{
    var width = this.naturalWidth;
    alert(width);
}

---

IE中不支持naturalWidth和naturalHeight属性，请尝试一下。

这是最终的工作代码。。。万一有人想知道。只需等待图像加载即可

<script type="text/javascript">
    $(function() {
        $("#thumb").jCarouselLite({
            btnNext: "#down",
            btnPrev: "#up",
            vertical: true,
            visible: 4
        });

        $("#thumb li img").click(function() {
            var newlinkimage = $(this).attr("src");
            newlinkimage = 'retouche-hr' + newlinkimage.substring(14,17);

            $('#hr').remove();

            var newimage = new Image();
            newimage.src = newlinkimage + '-a.jpg';

            newimage.onload = function()
            {
                var width = (newimage.width);
                var height = (newimage.height);

                $('#contentfull').append('<div id="hr"> </div>');
                $("#hr").attr("width", width).attr("height", height);
                $("#hr").addClass('hrviewer');
                //alert('a');
                $("#hr").append('<div id="avant"> <img alt="before" src="' + newlinkimage +'-a.jpg"></div>');
                $("#hr").append('<div id="apres"> <img alt="after" src="' + newlinkimage +'-b.jpg"></div>');
                //alert('b');
                $("#avant img").attr("src", newlinkimage + '-a.jpg').attr("width", width).attr("height", height);
                $("#apres img").attr("src", newlinkimage + '-b.jpg').attr("width", width).attr("height", height);

                $("#apres img").load(function(){$("#hr").beforeAfter({animateIntro:true});});        
            }  
        })
    });
</script>

$（函数（）{
$（“拇指”）.jCarouselLite({
btnNext:“向下”，
btnPrev:“向上”，
是的，
可见：4
});
$（“#thumb li img”）。单击（函数（）{
var newlinkimage=$（this.attr（“src”）；
newlinkimage='retouche hr'+newlinkimage.substring（14,17）；
$（'#hr'）。删除（）；
var newimage=newimage（）；
newimage.src=newlinkimage+'-a.jpg'；
newimage.onload=函数（）
{
变量宽度=（newimage.width）；
var height=（newimage.height）；
$（'#contentfull'）。追加（''）；
$（“#hr”）.attr（“宽度”，宽度）.attr（“高度”，高度）；
$（“#hr”）.addClass（'hrviewer'）；
//警报（“a”）；
$（“#hr”）。追加（“”）；
$（“#hr”）。追加（“”）；
//警报（“b”）；
$（“先锋img”）.attr（“src”，newlinkimage+'-a.jpg'）.attr（“宽度”，宽度）.attr（“高度”，高度）；
$（“apresimg”）.attr（“src”，newlinkimage+'-b.jpg'）.attr（“width”，width）.attr（“height”，height）；
$（“#apres img”）.load（function（）{$（“#hr”）.beforefafter（{animateIntro:true}）；}）；
}  
})
});

对我来说，以下工作

    $('<img src="mypathtotheimage.png"/>').load(function () {

        if (!isNotIe8) {
            // ie8 need a fix
            var image = new Image(); // or document.createElement('img')
            var width, height;
            image.onload = function () {
                width = this.width;
                height = this.height;
            };
            image.src = $(this).attr("src");

        } else {
            // everythings fine here ....
            // this.naturalWidth / this.naturalHeight;
        }

$（''）.load（函数（）{
如果（！isNotIe8）{
//ie8需要修复吗
var image=new image（）；//或document.createElement（'img'））
宽度、高度；
image.onload=函数（）{
宽度=此宽度；
高度=此高度；
};
image.src=$（this.attr（“src”）；
}否则{
//这里一切都好。。。。
//this.naturalWidth/this.naturalHeight；
}

设置

src

和

onload

的顺序对于调用加载回调非常重要。嗯，我在Chrome和Firefox中进行了测试，它们都工作正常。IE也显示了警报，但不支持NaturalWidthThank。非常感谢！非常有效（2016和2016年）IE>=9支持

naturalWidth

和

naturalHeight

根据：）那么“正常”宽度和高度如何