调用onload resize函数后获取页面中图片的大小

发布于 2024-12-28 13:24:52 字数 1182 浏览 0 评论 0原文

我正在尝试编写一个JavaScript来提取html中宽度和高度高于指定值的图片。我使用DOM来提取图片。问题是：

我想要提取的页面实际上有一个名为“checkimagesize”的 JavaScript。每个都会调用一个 onload 函数，例如：

<img src="./01_files/mobile01-cdbd8.jpg" id="http://attach.mobile01.com/attach/201112/mobile01-cdbd8.jpg" onload="checkimagesize(this.id,this.width,this.height)" />

在每次调用“checkimagesize”之后，我使用 DOM 来提取图片。宽度和高度均为零。（图片是通过onload函数调整的）

有谁知道调用resize函数后如何获取这些图片的实际宽度和高度吗？

非常感谢。

function checkimagesize(image, wi, hi)
{
    var wo = wi + 40;
    var ho = hi + 40;
    var resize = false;
    var imax = 640;
    if (wi > imax) {
        rating = wi / imax;
        wi = Math.ceil(wi / rating);
        hi = Math.ceil(hi / rating);
        resize = true;
    }

    if (resize) {
        reimg = document.getElementById(image);
        reimg.width = wi;
        reimg.height = hi;
        reimg.onclick = function () {window.open(image, '', 'resizable=yes,status=yes,scrollbars=yes,width='+wo+',height='+ho);};
        reimg.style.cursor = 'pointer';
    }
}

我的代码：

listPics = document.images;
listPics[i].width 
listPics[i].height

原文

I am trying to write an JavaScript to extract the pictures in the html whose width and height are higher than a specified value. I use the DOM to extract the pictures. Here's the problem:

The pages that I want to extract has actually a JavaScript called "checkimagesize". Each will call an onload function like:

<img src="./01_files/mobile01-cdbd8.jpg" id="http://attach.mobile01.com/attach/201112/mobile01-cdbd8.jpg" onload="checkimagesize(this.id,this.width,this.height)" />

After each calls the "checkimagesize", I use DOM to extract the pictures. The width and height are all zero. (The pictures are reized by the onload function)

Does anyone know how to get the actual width and height of these pictures after it called the resize function?

Thank you very much.

function checkimagesize(image, wi, hi)
{
    var wo = wi + 40;
    var ho = hi + 40;
    var resize = false;
    var imax = 640;
    if (wi > imax) {
        rating = wi / imax;
        wi = Math.ceil(wi / rating);
        hi = Math.ceil(hi / rating);
        resize = true;
    }

    if (resize) {
        reimg = document.getElementById(image);
        reimg.width = wi;
        reimg.height = hi;
        reimg.onclick = function () {window.open(image, '', 'resizable=yes,status=yes,scrollbars=yes,width='+wo+',height='+ho);};
        reimg.style.cursor = 'pointer';
    }
}

my code:

listPics = document.images;
listPics[i].width 
listPics[i].height

分享到QQ

分享到微博

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

发布评论

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

黑寡妇 2025-01-04 13:24:52

您可能正在尝试在图像加载完成之前访问图像属性。尝试在窗口的 load 事件之后执行代码（当所有页面元素完成加载时）：

window.onload = function () {
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];  
        console.log("image size: " + img.width + "×" + img.height);
    }
};

You are probably trying to access the image properties before they have finished loading. Try executing your code after the window's load event (when all page elements have finished loading):

window.onload = function () {
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];  
        console.log("image size: " + img.width + "×" + img.height);
    }
};

回复收藏 0 原文

~没有更多了~