Zmień rozmiar obrazu przed załadowaniem - jquery

Question

Używam this plugin do tworzenia powiększenia obrazu i galerii, ale chcę przeskalować wszystkie obrazy, aby pasowały do ​​kontenera (za pomocą algorytmu współczynnika).

Oto funkcja stosunek:

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

A to, w jaki sposób Fotogaleria load:

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

Co próbowałem:

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

Ale scaleSize nie działa poprawnie, ponieważ aktualna szerokość i wysokość nie jest jeszcze zdefiniowana (obraz jeszcze nie istnieje w dom) .

Dzięki za wszelkie wskazówki.

Answer 1

Wziąłem spojrzeć na kod wtyczki i pomyśleć zadzwonić do scaleSize() zbyt wcześnie. Obraz z klasą simpleLens-big-image istnieje po skonfigurowaniu var img i wykonaniu addClass(). Spróbuj następujące:

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

Answer 2

Spróbuj czegoś podobnego i wywołaj metodę onload. Pozwoli to upewnić się, że obraz jest ładowany do DOM przed rozmiaru

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