javascript - 9gag解析json

Question

我想从中挑选一张随机图片：

http://9gag.com/top/all/index/page/1?view=json

为了正确显示它，我需要知道这个图像的大小。

我使用 YQL 将此 json 的结果放入一个变量（称为source）中。

我用 http 替换 https 并删除每个反斜杠。

var it = $.parseJSON(source);
var total = it.count-1;
var random = Math.floor((Math.random()*total)+0);     
var gagurl = it.items[random];
var gagurldecode = gagurl.replace('\\','');
gagurldecode = gagurldecode.replace('https','http'); //here is the url of the image 

但我无法检索此图像的大小。

   var img = new Image();
   img.src = gagurldecode;

警报（img.height）；什么都不返回。

如果我更换

img.src = gagurldecode;

和

img.src = 'http://d24w6bsrhbeh9d.cloudfront.net/photo/1777377_460s.jpg';

有用。

我做错了什么？ PS：对不起我的英语！

Answer 1

此行是不必要的，因为在解析 JSON 时会转义斜杠：

var gagurldecode = gagurl.replace('\\','');

对于您的实际问题，直到下载height并width检查图像后才会填充 和 。如果浏览器没有看到图像（在事件处理程序中），则这是异步完成的，onload但如果像硬编码示例中那样从缓存中检索，则可以同步完成：

img.onload = function() {
    alert(img.height);
}

这将每次都有效。

Answer 2

你为什么要做替换电话？这不是必需的，因为在将字符串解析为 json 后，斜杠将不会为您转义。（此外，您的替换调用不是replaceAll）

尝试这个：

//str is going to be the json you get from that url
var str = '{"items":["http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/5373376_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/2899638_460s_v1.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/3196367_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/1777377_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/3233576_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/3101249_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/3279498_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/2487961_460s.jpg","http:\/\/d24w6bsrhbeh9d.cloudfront.net\/photo\/2693569_460s.jpg"],"layout":"list","count":9}'
var obj = JSON.parse(str);
var src = obj.items[~~(Math.random() * (obj.items.length - 1))];
img.src = src;