Question

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

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;
};

我试过这个，但这个方法甚至都被调用了

    $("#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
});

在加载时将图像大小调整为图像

1 个答案: