Зміна розміру зображень в Jquery незабаром після додавання до DOM? - javascript, jquery, image, dom, resize

Я роблю щось на зразок цього:

maxDim = 100;
$("div.images").html("<img class="pull" src="/images/"+imgs[img_i]+"" />");
$("img.pull").each(function(i){
if( $(this).height() > $(this).width() ){
var h = maxDim;
var w = Math.ceil( $(this).width() / $(this).height() * maxDim);
}
else{
var w = maxDim;
var h = Math.ceil( $(this).height() / $(this).width() * maxDim);
}
$(this).css({height:h, width:w});
});

Тепер я гарненько впевнений, що частина зміни розміру зображення відмінна ... ESP, оскільки вона співпадає з цією відповіддю http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

Проблема, яка іноді працює, іноді цене буде (воно іноді відображатиметься в нативному дозволі та змінюється на інших). Схоже, що час є справжньою проблемою тут. Може бути, зміна розміру викликається до того, як зображення насправді знаходиться в DOM, щоб вибрати його знову відразу? Будь-який поради, які ви, хлопці, були б дуже вдячні.

Відповіді:

Я думаю, зображення ще не завантажуються іноді. У цьому випадку вихідний розмір досі невідомий (0), і розрахунок веде до NaN-значень через поділ на нуль.

Зміна розміру, коли подія завантаження зображень спрацьовує, повинна бути опцією.

Вам знадобиться спеціальний модуль завантаження подій для завантаження зображень. В іншому випадку подія не спрацьовує, якщо зображення вже знаходиться в кеші браузера. Тоді ви можете зробити це:

$("img.pull").load(function(i){
// ...
});