Помогите разобратся с скриптом

Код по клику на одной картинке открывает другую(более информативную) все работает но хочу автоматом размещать крестик закрытия. И в большей части случаев все ок . Но если картинка загружается с задержкой крест не перемещается в угол. Только после повторного открытия. В js новичок. Помогите разобраться.
function photo_zoom(picture) {

    function photo_zoom(picture) {
      $(picture).click(function () { // Событие клика на маленькое изображение
        let src = $(this).attr('src'); // Достаем \ путь к фото
        let src_full = src.replace(".jpg", "_full.jpg"); //у "большой" картинки должна быть добавка к имети- _full

        $("body").append("<div class='popup'>" + //Добавляем подложку
          "<img src=" + src_full + " class='popup__img' />" + // фото
          "<div class='popup__close'>&times;</div>" + //крестик закрытия
          "</div>");
        /////////////////размещаем крестик закрытия в правом верхнем углу фото////////////

        $(".popup").fadeIn(800, function () {
          let popupImgCoordinate = document.querySelector('.popup__img').getBoundingClientRect();
          $(".popup__close").css({
            left: popupImgCoordinate.right - 40,
            top: popupImgCoordinate.top + 20,
          });
        });
        ///////////////закрываем фото по клику на подложку////////////
        $(".popup").click(function (event) {
          if (event.target.className === 'popup' || event.target.className === 'popup__close') {
            $(".popup").fadeOut(800); //событие клика на подложку или крестик
            setTimeout(function () {
              $(".popup").remove(); // Удаляем подложку
            }, 800);
          }
        });
      });
    }
    module.exports = photo_zoom;