Question

我正在尝试构建一个脚本，浏览器调整大于容器的图像大小：

  $('img').each(function(i){
    var parent_width = parseInt($(this).parent().width()),
        image_width = parseInt($(this).width());

    if(parent_width !== image_width){
      $(this).width(parent_width).wrap(
         '<a class="resized-image" href="' + this.src + '">'
       + ' <span class="msg">'
       + '   This image has been resized to ' + parent_width + ' pixels'
       + '   and ' + $(this).height() + ' pixels'
       + '</span>'
       + '</a>'
      );
    }
  });

调整大小有效，但我怎样才能收到一条好消息告诉用户原始图像大小，图像大小调整的百分比以及原始图像大小（KB）？

像

此图片已调整为400 x 300（50％）。原始图像有800 x 600和75 KB。点击查看原文

到目前为止，我只能计算出已调整大小的图像的宽度（由于某种原因，height（）返回0）

Answer 1

使用$（window）.load

包装代码

$(window).load(function() {
     // your code
});

Answer 2

试试这个：

$('img').one('load', function () {

    var parent_width = parseInt($(this).parent().width()),
        image_width = parseInt($(this).width());

    if(parent_width !== image_width){
      $(this).width(parent_width).wrap(
         '<a class="resized-image" href="' + this.src + '">'
       + ' <span class="msg">'
       + '   This image has been resized to ' + parent_width + ' pixels'
       + '   and ' + $(this).height() + ' pixels'
       + '</span>'
       + '</a>'
      );
    } 

});

$('img').each(function () {
     //If image is cached by browsers, trigger .load()
    if (this.complete){        
         $(this).trigger('load');
    }
 });

在jsfiddler中进行测试。

使用jQuery自动调整图像大小以适合容器

2 个答案: