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

Posted 2023-02-21

【中文标题】加载时将调整大小功能绑定到图像

【英文标题】：binding resize function to images upon loading

【发布时间】：2013-02-24 17:01:03

【问题描述】：

我一直在使用 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();
   );

【参考方案1】：

你有错误

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

所以

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

这里

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