Question

我正在将图像加载到div中，然后启动旋转木马到新加载的图像。一切都正常，除了我无法获得脚本获取图像的宽度并设置它。

这就是我现在所拥有的......

获取图像尺寸功能

function imgSize() {
    $('img').each(function() {
        var imgWidth = $(this).width();
        var imgHeight = $(this).height();
        $(this).attr('height', imgHeight);
        $(this).attr('width', imgWidth);
    });
}

加载新页面，调用图像大小功能和轮播功能

$('.menu a').live('click', function() {
        var id = $(this).attr('id');
        var page = id + '.html'
        $('#portfolio').load( page , function() {
            imgSize();
            $('#portfolio').carouFredSel(settings);
            $('#bodyFooter span').show();
        });
    });

您可以在此处看到一个示例：http://www.amandarecker.com/siteTest当您点击“美女”时，所有图像会相互叠加，或者甚至不显示。当我用firebug查看源时，宽度设置为0.为什么？

希望有人能帮忙......谢谢

Answer 1

我可能错了，但你可能试图让图像宽度过快。即图像尚未加载，因此其宽度返回0.

尝试为您的功能添加负载。

function imgSize(){
    $("img").load(function(){
        var width = $(this).width();
        var height = $(this).height();
        $(this).attr("width",width).attr("height",height);
    });
}

这只会在图像完全加载后尝试获取值。

Answer 2

您可能需要访问图片的DOM，请尝试：

function imgSize() {
    $('img').each(function() {
        var imgWidth = $(this)[0].naturalWidth;
        var imgHeight = $(this)[0].naturalHeight;
        $(this).attr('height', imgHeight);
        $(this).attr('width', imgWidth);
    });
}

我不确定你是如何加载图片的，但这是一个例子：

function loadImage(src, f)
{ 
  var img = new Image();

  $(img).load(function() {
    $(this).hide();
     if(f) f(img);
  }).error(function() {
    return false;
  }).attr('src', src);
}

loadImage('path/to/image.png', function(image) {
  // access image.naturalWidth and image.naturalHeight here to get the dimensions
});

因此，如果您加载一些新的html（它可能应该首先插入页面），请尝试：

// passive (wait for load)
$(html).find('img').load(function() {
  var imgWidth = $(this).width();
  var imgHeight = $(this).height();
  //var imgWidth = $(this)[0].naturalWidth;
  //var imgHeight = $(this)[0].naturalHeight;
  $(this).attr('height', imgHeight);
  $(this).attr('width', imgWidth);
});

// aggressive (load them yourself)
$(html).find('img').each(function() {
  $this = $(this);
  loadImage($(this).attr('src'), function(image) {
    $this.attr('width', image.naturalWidth).attr('height', image.naturalHeight);
  });
});

Answer 3

首先关闭，js的答案很棒，你也可以尝试更新你的IMG标签，输入宽度=“xxx”height =“xxx”的图像.. Dom不关心img高度，可以围绕它扩展，js不理解未加载图像的高度 - 需要在脚本之前知道大小，你可以先对其进行硬编码然后覆盖。

另一种方法是将图像加载到隐藏的div或lazyload中，然后在完成执行时运行脚本。祝你好运！

动态加载后获取图像宽度问题。为什么？

3 个答案: