jquery在服务器上无法获取图像值。

Question

19 浏览2023年3月15日

匿名的 2023年3月16日

0 Comments

我有一个JavaScript代码，它应该获取图像的实际宽度和高度。当我在本地测试时，127.0.0.1:8000控制台记录了快照 enter image description here ，但在服务器上却失败了返回0作为图像的宽度和高度。

尝试将代码嵌套在jQuery的ready事件中，但它在图像完全加载之前就触发了，所以我认为这是问题所在。

以下是JavaScript代码：

$(function() { 
    $(document).ready(function() { 
        $('.lynk-section img').each(function() {
            var width = $(this)[0].naturalWidth;
            console.log(width);
            //$(this).css('max-width', width+'px');
            var height = $(this)[0].naturalHeight;
            console.log(height);
            //$(this).css('max-height', height+'px');
        });
    });
});

0

3 答案

匿名的 · Answer 1 · 2023-07-24T12:11:49+00:00

问题的出现原因是在服务器上无法获取到图片的值。解决方法是将代码放在window的load事件下，并且代码要在window加载完成后运行，这样才能读取到图片的尺寸。

具体解决方法如下：

$(function() { 
    $(window).on('load',function() {
        // 在这里编写测量图片尺寸的代码
    });
});

需要注意的是，代码要放在window的load事件下，而不是document的load事件下。只有在window加载完成后，才能读取到图片的尺寸。

匿名的 · Answer 2 · 2023-05-27T01:32:35+00:00

问题的原因是使用了jQuery的$(function())或$(document).ready(function())方法只会等待HTML代码加载完毕，而不会等待页面上的图片资源加载完毕。因此，在这种情况下无法获取到图片的值。

解决方法是使用window.load事件来等待页面上的图片资源加载完毕，然后再获取图片的值。下面是一个示例代码：

$(window).on('load', function() {
  // 在这里获取图片的值
});

通过使用window.load事件，可以确保在获取图片的值之前，页面上的所有图片资源都已经加载完成。这样就可以正确地获取到图片的值了。

匿名的 · Answer 3 · 2023-05-04T06:40:58+00:00

问题原因：在服务器上使用jQuery时，无法获取图像的宽度和高度值。

解决方法：使用图像的onload事件或window.onload事件。

代码如下：

$('img').each(function() {
  $(this).on("load", function(){
    console.log("width: ", this.naturalWidth);
    console.log("height: ", this.naturalHeight);
  });
});

注意：这里的each()方法是多余的。