Изменение размера изображения перед загрузкой - jQuery

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

Я посмотрел в код плагина и думаю, что вы называете scaleSize() слишком рано. Изображение с классом simpleLens-big-image существует сначала после настройки var img и 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]); 

Answer 2

Попробуйте что-нибудь подобное и вызовите метод onload. Это позволит убедиться, что изображение загружается в DOM, прежде чем изменить размер

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