Как сделать скрипт определения размера отложенного элемента универсальным и модульным ⇐ Jquery

[Anonymous]

TLDR: я создал сценарий, который изменяет размер контейнера гибкого изображения до ширины лениво загруженного содержимого изображения при загрузке изображения. У меня ограниченные навыки работы с javascript/jquery, и мне нужна инструкция по замене целевых элементов в моем скрипте (идентификаторы, классы) универсальными дескрипторами (каждый, это), если это возможно. Цель состоит в том, чтобы минимизировать сложность сценария и позволить применять его к нескольким элементам и новым по мере их добавления.
(Существует два варианта баннера: а) одно изображение в дочернем элементе контейнера изображений и б) два изображения в дочернем элементе контейнера изображений с зазором в 8 пикселей между ними. Таким образом, существует два варианта сценария. )
Более длинная история: у меня есть гибкий баннер (row nowrap), содержащий два дочерних элемента: контейнер изображения и текстовый контейнер. Оба дочерних элемента имеют высоту: 100%, но ширина элемента изображения определяется шириной содержимого изображения (ширина: авто, высота 100%), а ширина текстового элемента затем определяется оставшейся родительской шириной. Проблема в том, что, поскольку лениво загруженное изображение не загружается вместе с DOM, flex не может правильно рассчитать ширину изображения при загрузке страницы и, следовательно, не может указать ширину ни одному из дочерних элементов. Я решил эту проблему, создав скрипт, который изменяет размер контейнера изображения до ширины лениво загруженного содержимого изображения при загрузке изображения и, таким образом, эта ширина известна. Затем скрипт возвращает точные значения ширины в пикселях гибким дочерним элементам. Сценарий также должен повторяться, если размер окна изменяется. Все работает отлично, но раздуто, избыточно и не универсально: каждый новый баннер потребует новой итерации скрипта.
Мне нужна инструкция по замене конкретных целевых элементов универсальными значениями (каждый, этот) в любом родительском элементе баннера. Спасибо.
Сценарий:
$(document).ready(function() {
$("#cs-1i img").load(function() {
var imgWidth1 = $(this).width();
var contWidth1 = $("#cs-1i").parent().width();
var textWidth1 = contWidth1 - imgWidth1;

$("#cs-1t").width(textWidth1);
$("#cs-1i").width(imgWidth1);
});

$("#cs-2i img").load(function() {
var imgWidth2 = $(this).width()*2;
var contWidth2 = $("#cs-2i").parent().width();
var imgWidth2x = imgWidth2 += 8;
var textWidth2 = contWidth2 - imgWidth2;

$("#cs-2t").width(textWidth2);
$("#cs-2i").width(imgWidth2x);
});

$(window).resize(function() {
var imgWidth1 = $("#cs-1i img").width();
var contWidth1 = $("#cs-1i").parent().width();
var textWidth1 = contWidth1 - imgWidth1;

$("#cs-1t").width(textWidth1);
$("#cs-1i").width(imgWidth1);
});

$(window).resize(function() {
var imgWidth2 = $("#cs-2i img").width()*2;
var contWidth2 = $("#cs-2i").parent().width();
var imgWidth2x = imgWidth2 += 8;
var textWidth2 = contWidth2 - imgWidth2;

$("#cs-2t").width(textWidth2);
$("#cs-2i").width(imgWidth2x);
});
});

HTML:



Title
Subtitle










Title
Subtitle












Подробнее здесь: https://stackoverflow.com/questions/798 ... nd-modular