Контекст в функции

[bonny]

Привет. Не понимаю как сделать в this.img.onload = function() верный контекст для установки значений и запуска функции...

originalPreview = el.src; // Save original pic
el.src = external; // Replace pic
//fullOpen();

https://codepen.io/THEb0nny/pen/NBYPEO

Начиная. 288 строка.

Скрипт, который открывает картинку. Хочу переделать, чтобы была возможность открывать превью заменой ссылки.

[Nexus]

bonny, где переменная el инициализируется?
Если нужно сохранить в переменную originalPreview адрес загруженного в текущий момент изображения, то el замените на this.

[bonny]

bonny, где переменная el инициализируется?
Если нужно сохранить в переменную originalPreview адрес загруженного в текущий момент изображения, то el замените на this.

Строка 49.

Ну вот я написал... Но указать originalPreview и external контекст нужно.

this.img.onload = function() {
            console.log("Downloaded");
            originalPreview = this.src; // Save original pic
            this.src = external; // Replace pic
            //fullOpen();
          };

А не... Подождите я же чуть ранее до функции this.img.onload кладу в this.img ...

this.img = new Image();
this.img.src = this.external;

и что в originalPreview = this.src; тоже тогда кладу тот же адрес? Мне это не подходит.
Нужно el.src поменять адрес, который из external, а в originalPreview я сохраню предыдущий адрес, чтобы когда картинку закрыть, то поменять обратно адрес.

[Nexus]

Don't understand

[bonny]

Было как.

<img class="materialboxed" width="100%" src="https://materializecss.com/images/sample-1.jpg">

Добавил туда data-external="https://lorempixel.com/800/400/nature/4"

В скрипте, менять нужно ссылку элемента el.src на this.external.
Чтобы дальше анимация открытия на полный экран не работала я добавил функцию onload, чтобы проверить загрузиться ли вообще картинка полная, а в неё (функцию) кидаю код замены и дальше уже полного открытия... Но вот проблема с контекстами.

[Aetae]

Событие принудительно ставит "контекстом" коллбэка сам элемент вызвавший событие.

Есть множество вариантов борьбы с этим, но ИМХО, только два достойны использования:
Задавать коллбэк через стрелочную функцию:

this.img.onload = event => {
  console.log("Downloaded");
  console.log(this.el.src);
};

т.к. стрелочная функция железно цепляет вышестоящий "контекст".

Вешать обработчиком события не коллбэк, а сам объект, имеющий служебный метод handleEvent:

this.img.addEventListener('load', this);

class Materialbox extends Component {
  //...
  handleEvent(event){
    switch(event.type){
      case 'load':
        this.imageLoad(event);
        break;
      //...
    } 
  },
  imageLoad(event){
    console.log("Downloaded");
    console.log(this.el.src);
  }
  //...
}

что отлично сочетается с ООП.

[bonny]

Dilettante_Pro, А ну я тупанул, назвав originalPreview. Там оригинальная картинка - el.src должна быть.
originalPic я установлю в функции onload (как проверим доступна ли картинка по адресу) и там дальше всю работу сделать нужно. А контекст не знаю как выставить.
this.external это у нас data-external="https://lorempixel.com/800/400/nature/4".

[bonny]

Aetae, благодарю.