加载时将调整大小功能绑定到图像

Question

我一直在使用 twitter 引导轮播，并且我编写了自己的图像调整大小函数，以便图像按比例调整到窗口大小。我还实现了图像的延迟加载，以便仅在当前活动幻灯片时才加载图像。所以我的问题是，如何将我的调整大小功能绑定到每个轮播项目激活时？

HTML：

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item" id="item1"> 
      <img src="img1.jpg">
    </div>
    <div class="item" id="item2">
      <img lazy-src="img2">
    </div>
      <div class="item" id="item3">
        <img lazy-src="img3">
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我的图片调整大小 JS：

$.fn.imagefit = function(options) {
    var fit = {
        all : function(imgs){
            imgs.each(function(){
                fit.one(this);
                })
            },
        one : function(img){
            var winRatio = parseInt($(window).width()) / parseInt($(window).height());
            var imgRatio = parseInt($(img).width()) / parseInt($(img).height());

            //If imgRatio > winRatio, image is proportionally wider than the resolution ratio for window
            if(imgRatio > winRatio){
                // Fit to width
                $(img).width($(window).width());
                $(img).height(parseInt($(img).width())/imgRatio);
            } else {
                // Fit to height
                $(img).height($(window).height());
                $(img).width(parseInt($(img).height())*imgRatio);

            }
        }
    };

    this.each(function(){
            var container = this;

            // store list of contained images (excluding those in tables)
            var imgs = $('img', container).not($("table img"));

            // store initial dimensions on each image 
            imgs.each(function(){
                $(this).attr('startwidth', $(this).width())
                    .attr('startheight', $(this).height())
                    .css('max-width', $(this).attr('startwidth')+"px");

                fit.one(this);
            });
            // Re-adjust when window width is changed
            $(window).bind('resize', function(){
                fit.all(imgs);
            });
        });
    return this;
};

我已经试过了，但是方法 wan'st 甚至被调用了

    $("#item1").bind("load", function(){
    ("#item1").imagefit(); 
    });

我也试过这个，但是它打破了轮播，因为 item2,3 在成为活动项目后没有显示，它们的宽度设置为 0

   $(window).load(function(){
     $('#item1, #item2, item3').imagefit();
   });

Answer 1

你有错误

$("#item1").bind("load", function(){
  ("#item1").imagefit(); // no $ 
});

所以

$("#item1").bind("load", function(){
  $(this).imagefit();
});

这里

$(window).load(function(){
   $('#item1, #item2, item3').imagefit(); // #item3
});