加载大小的图像事件

正如您所看到的，当网页加载大图像时，浏览器可在加载开始时知道图像大小（宽度和高度）。加载大小的图像事件

我正在寻找一种方法在JavaScript中添加事件时调用大小已知（不是当完整图像加载时）;有点像metadataloaded视频。

代码示例（使用jQuery）：

var img = new Image(); 
img.src = "images/picture.jpg"; 

console.log(img.width,img.height); // 0, 0 (image size is not known yet) 

$(img).on("imagesizeloaded",function(){ 
    console.log(img.width,img.height); //expected: 1024, 768 (for example) 
});

来源

2012-10-30 Yukulélé

我想'load'是唯一的选择 –

，你可以通过其他方式 –

发送元数据，我不认为这样的事件（像头加载）存在 –

您可以在服务器上创建一个AJAX回调来获取元数据。更好的是，使用文件名发送元数据。

示例使用jQuery（客户端）：

var img = new Image(); 
img.src = "images/picture.jpg"; 

$.get("ajax.php", {action: "getImageSize", url: img.src}) 
.success(function(r){ 
    console.log(r.width, r.height) 
})

服务器部分将取决于您所使用的服务器端技术。它需要

open the image by its url 
read the image metadata 
send a JSON response

在最坏的情况，你可以查询的图像数据，直到它的非零。

var img = new Image(); 
img.src = "images/picture.jpg"; 

(function testImageSizeKnown(){ 
    if(img.height && img.width){ 
    console.log(img.height, imp.width) 
    }else{ 
    setTimeout(testImageSizeKnown, 100) // check every 100 ms 
    } 
)()

来源

2012-10-30 09:20:48

谢谢！我的目标是一个非服务器依赖的解决方案，然后第二个版本对我来说更好，但是有可能使用监听器的“onprogress”事件（在映像上或xhr2在负载结束时将数据发送到新映像）而不是使用超时？ –

@Yukulélé图像元素不会显示出可以根据MDN使用的“progress”事件 - 并且通过XHR获取图像数据似乎有问题（并且您仍然可能必须能够解析部分二进制文件数据，以及最终显示图像）。您可以将'onprogress'处理程序附加到图像上，但我怀疑它会被调用。 –

加载大小的图像事件

回答

相关问题