Question

我想要获得的自然大小的图像的URL存储为数据标记，如下所示：

<div class="background_one" data-image="//localhost:3000/my_project/wp-content/uploads/2017/03/case_2_desk-1.jpg"></div>

使用jQuery我检索此URL，创建一个图像对象，我将URL指定为源，然后获取此图像对象的大小。

$('.background_one').each(function(){
    var image = new Image();
    image.src = $(this).data('image');
    alert('width: ' + image.naturalWidth + ' and height: ' + image.naturalHeight);
});

它应该有效，但事实并非如此。 alert()显示“width：0和height：0”。为什么呢？

Answer 1

你试过了吗？

image.onload = function() { console.log(this.height); };

您是否已将您的代码添加到document.ready函数中，如下所示：

$(document.ready(function(){ // your code });

Answer 2

因为它还没有加载。

您需要等待load事件才能访问图片尺寸。

$('.background_one').each(function(){
    var image = new Image();
    image.onload = function(){
       alert('width: ' + image.naturalWidth + ' and height: ' + image.naturalHeight);
    };
    image.src = $(this).data('image');
});

为什么我不能获得图像的自然宽度？

2 个答案: