0

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

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

4

3 回答 3

4

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

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

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

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

于 2012-04-25T16:21:11.790 回答
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);
  });
});
于 2012-04-25T16:14:30.800 回答
0

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

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

于 2013-04-16T23:19:28.180 回答