Как я могу выбрать источник изображения того же размера, что и исходное изображение после добавления источников? - PullRequest
Новая
       81

Как я могу выбрать источник изображения того же размера, что и исходное изображение после добавления источников?

1 голос
/ 03 августа 2020

У меня есть набор кода, над которым я работаю. В моем HTML я идентифицирую Img с помощью идентификатора, затем Javascript берет этот идентификатор, находит фактический href и настраивает множество srcset и других атрибутов: 

<img id="drinks" height="130" alt="Serve myself $150 cognac?  Don't mind if I do'" />

и после магии он получается так: 

<figure><img id="drinks" height="130" alt="Serve myself $150 cognac?  Don't mind if I do" srcset="images/jalhanedafirst2019/drinksfx.jpg 501w, images/jalhanedafirst2019/drinks1x.jpg 1000w, 
images/jalhanedafirst2019/drinks2x.jpg 2000w, images/jalhanedafirst2019/drinks3x.jpg 4000w, 
images/jalhanedafirst2019/drinks4x.jpg 5000w" src="images/jalhanedafirst2019/drinks1x.jpg" border="2" sizes="(min-width: 501px) 200px">
  <figcaption>Serve myself $150 cognac? Don't mind if I do
  </figcaption>
</figure>

Моя проблема в том, что я хочу, чтобы размер изображения был таким же, как и у изображения ПОСЛЕ того, как это будет сделано, выясняя размер страницы, ширину изображений и выбирая правильный из srcset.

К вашему сведению, я НЕ использую jquery.

Я пробовал MutationObserver и запускал его после document.onload, но они не улавливают его в нужное время (многие ширина изображения равна 0 во время выполнения или Мутация даже не улавливает изменение размера атрибутов). сопоставьте дочернее изображение. 

var els = document.querySelectorAll("figure");

for (var x = 0; x < els.length; x++) {
  var child = els[x].children;
  var i1 = 0;
  var i2 = 0;
  for (var y = 0; y < child.length; y++) {
    if (child[y] instanceof HTMLImageElement) {
      i1 = y;
    } else
      i2 = y;
  }
  console.debug(i2 + ":" + i1);
  console.debug(child[i1].id);
  console.debug(child[i1].width);
  child[i2].width = child[i1].width;
  console.debug(child[i2].width);
  els[x].width = child[i1].width;
}

Есть идеи?

...