Question

我正在使用this plugin 创建图像缩放和图库，但我想缩放所有图像以适应容器（使用比率算法）。

这是比率函数：

function scaleSize(maxW, maxH, currW, currH){
  var ratio = currH / currW;
  if(currW >= maxW && ratio <= 1){
     currW = maxW;
     currH = currW * ratio;
  } else if(currH >= maxH){
     currH = maxH;
     currW = currH / ratio;
  }
  return [currW, currH];
}

这就是画廊加载图片的方式：

 var img = $('<img>').load(function(){
            img.appendTo(a);
            image_container.html(a);
 }).attr('src', src).addClass(opts.big_image_class);

我尝试了什么：

 var newSize = scaleSize(300, 320, $(".simpleLens-big-image").width(), $(".simpleLens-big-image").height());
 var img = $('<img>').load(function(){
            img.appendTo(a);
            image_container.html(a);
 }).attr('src', src).addClass(opts.big_image_class).width(newSize[0]).height(newSize[1]);

但是scaleSize无法正常工作，因为当前的宽度和高度尚未定义（dom中尚不存在图像）。

感谢您的任何指示。

Answer 1

尝试这样的方法并调用onload方法。这将确保在调整大小之前将图像加载到DOM

var img = $('<img>');    
img.src = src ;
img.onload = function() {
    // Run onload code.
} ;

Answer 2

我查看了插件代码，并认为您过早地致电scaleSize()。在设置var img并完成simpleLens-big-image之后，首先存在类addClass()的图像。请尝试以下方法：

var img = $('<img>').load(function(){
           img.appendTo(a);
           image_container.html(a);
}).attr('src', src).addClass(opts.big_image_class);
// at this point img should contain $(".simpleLens-big-image") so we can refer to img
var newSize = scaleSize(300, 320, img[0].naturalWidth, img[0].naturalHeight());
img.width(newSize[0]).height(newSize[1]);

加载前调整图像大小 - jquery

2 个答案: