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

【问题标题】：Issue getting image width after dynamic load. Why?动态加载后获取图像宽度的问题。为什么？
【发布时间】：2012-05-06 08:48:07
【问题描述】：

我正在将图像加载到 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。为什么？

希望有人可以帮助...谢谢

【问题讨论】：

标签： jquery dynamic load width

【解决方案1】：

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

尝试为您的函数添加负载。

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

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

【讨论】：

我认为将整个内容放入 $(document).load(function(){}); 或将宽度和高度属性添加到您的 img 标签会更好
在我看来 imgSize 函数在 ajax 请求 "$('#portfolio').load( page , function() {" 等之后被调用，所以如果它被放入 $ (document).load... 它不会在通过 ajax 加载的图像上触发。另外值得注意的是，图像不必完全加载 $(document).load 才能触发。

【解决方案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);
  });
});

【讨论】：

你能给我更多的信息吗？我还是 jQUery 的新手，所以我不确定该放在哪里......
感谢您的更新 - 但这不起作用。检查 Firebug 后，现在高度和宽度返回 0。
啊，我想我误解了这个问题——我以为你在动态加载图像。对于页面上已有的图片，请检查@Ed Fryed 的答案 - 没有问题，很抱歉误解了这个问题
我正在动态加载图像...当我加载新的 .html 文件时，它包含已加载的图像列表。这些新加载的图像需要为它们设置宽度。我不能自己添加它们，因为有超过 50 张图片。
首先，感谢您一直以来的帮助。我有点困惑，我将把这段代码放在哪里进行测试。我还是 jQuery 的新手。我是否使用您的第三次编辑来代替 imgSize 函数？

【解决方案3】：

首先，js 的答案很棒，您也可以尝试通过为图像添加 width="xxx" height="xxx" 来更新您的 IMG 标签。Dom 不关心 img 高度并且可以围绕它展开, js 不理解未加载图像的高度 - 需要在脚本之前知道大小，您可以先对其进行硬编码，然后再覆盖。

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

【讨论】：