Javascript在图像加载后计算图像大小

发布于 2024-12-02 19:33:57 字数 290 浏览 8 评论 0原文

function loader(img) {
        var imgH = img.height;
        var imgW = img.width;
        console.log(imgH, imgW);    
    };

img = new Image();
img.src ='../images/pic1.jpeg';
img.onLoad = loader(img);

所以，我会得到图像的大小，但我在控制台中得到“0 0”。图像尺寸为500X700。这段代码有什么问题？

原文

function loader(img) {
        var imgH = img.height;
        var imgW = img.width;
        console.log(imgH, imgW);    
    };

img = new Image();
img.src ='../images/pic1.jpeg';
img.onLoad = loader(img);

So, It is exepeted, that I'll get image's size, but I got "0 0" in console. And size of image is 500X700. What's wrong with this code?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花落人离去 2024-12-09 19:33:58

试试这个：

function loader(){
    var imgH = this.height;
    var imgW = this.width;
    console.log(imgH, imgW); 
}
var img = new Image();
img.onload = loader;
img.src ='../images/pic1.jpeg';

Try this:

function loader(){
    var imgH = this.height;
    var imgW = this.width;
    console.log(imgH, imgW); 
}
var img = new Image();
img.onload = loader;
img.src ='../images/pic1.jpeg';

回复收藏 0 原文

埖埖迣鎅 2024-12-09 19:33:58

我使用这种方式：

img.onload = function(){//here wrote everything from loader};

这是我找到的唯一可行的解决方案。

I used this way:

img.onload = function(){//here wrote everything from loader};

And it was the only working solution I have found.

回复收藏 0 原文

錯遇了你 2024-12-09 19:33:58

我发现最好的方法是让计算机先进行缩放。

并在主体中声明 onload = "some_function()" 。

<body onload="some_function()">

然后在脚本中获取尺寸。

some_function(){

var image1 = document.getElementsByClassName('main')[0];
var computedStyle_image1 = window.getComputedStyle(image1);
var image_width = computedStyle_image1.getPropertyValue('width');

}

我注意到使用 google chrome，您需要确保在 body div 中调用 onload="function"，否则图像值不会设置，并且它会拉入 0px 的宽度和高度。

I found the best way is to let the computer do the scaling first.

and declaring the onload = "some_function()" in the body.

<body onload="some_function()">

and then getting the sizing afterward in the script.

some_function(){

var image1 = document.getElementsByClassName('main')[0];
var computedStyle_image1 = window.getComputedStyle(image1);
var image_width = computedStyle_image1.getPropertyValue('width');

}

I noticed with google chrome you need to make sure you call the onload="function" within the body div otherwise the image values arn't set and it pulls in 0px for width and height.

回复收藏 0 原文

岁月静好 2024-12-09 19:33:57

这是没有意义的：

img.onLoad = loader(img);

您想要将实际函数传递给事件：

img.onload = loader;

并在函数中使用 this 而不是 img 。

此外，您还需要在更改图像的 src 属性之前分配事件。

另请注意，图像上的加载事件存在许多问题。来自关于 load() 的 jQuery 手册：

与图像一起使用时加载事件的注意事项
开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行函数。有几个已知的警告需要注意。这些是：
跨浏览器工作不稳定且不可靠
如果图像 src 设置为与之前相同的 src，则在 WebKit 中无法正确触发
它没有正确地冒泡 DOM 树

This makes no sense:

img.onLoad = loader(img);

you want to pass the actual function to the event:

img.onload = loader;

and use this instead of img within the function.

Also you need to assign the event before changing the image's src property.

Also note that there are numerous problems with the load event on images. From the jQuery manual on load():

Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree

回复收藏 0 原文

~没有更多了~