图像 naturalWidth 返回零答案

【问题标题】：image naturalWidth return zero图像 naturalWidth 返回零
【发布时间】：2010-12-11 08:05:54
【问题描述】：

image naturalWidth 返回零...就是这样，为什么？

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

求助，我不知道为什么！

***那条路径不错，图片出现了！

【问题讨论】：

标签： javascript

【解决方案1】：

我猜这是因为您没有等待图片加载 - 试试这个：

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

【讨论】：

src 和 onload 的设置顺序对于调用加载回调很重要。
嗯，我在 Chrome 和 Firefox 中进行了测试，它们都运行良好。 IE 也显示警报，但不支持 naturalWidth
非常感谢！像魅力一样工作
（现在是 2016 年和）IE>=9 根据MDN 支持naturalWidth 和naturalHeight :)

【解决方案2】：

这是最终工作代码...以防有人想知道。只需等到图像加载完毕！

<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>

【讨论】：

【解决方案3】：

对我来说，以下作品...

    $('<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;
        }

【讨论】：