调整图像大小以便加载 - jQuery

Question

调整图像大小以便加载 - jQuery

6

我将使用这个插件来创建图片缩放和图库，但我想要缩放所有图片以适合容器（使用比例算法）。

这是比例函数：

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]);

但是由于当前宽度和高度未被定义（图片尚未存在于dom中），因此scaleSize不起作用。

感谢任何指针。

- Nothing

你的.simpleLens-big-image在哪里？ - Martin Ernst

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harsha Venkataramu · Answer 1

尝试像这样做，并调用onload方法。这样可以确保图片在调整大小之前加载到DOM中。

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

- Martin Ernst · Answer 2

我看了一下插件代码，认为你调用了 scaleSize() 太早了。在变量 img 设置和 addClass() 完成之后，首先存在一个类为 simpleLens-big-image 的图像。请尝试以下操作：

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]);