Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Контекст в функции (https://javascript.ru/forum/events/74710-kontekst-v-funkcii.html)

bonny 02.08.2018 10:11

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

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


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

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

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

Nexus 02.08.2018 10:23

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

bonny 02.08.2018 10:28

Цитата:

Сообщение от Nexus (Сообщение 491535)
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 02.08.2018 10:48

Don't understand :-?

bonny 02.08.2018 10:53

Было как.
<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 02.08.2018 11:21

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

Есть множество вариантов борьбы с этим, но ИМХО, только два достойны использования:
Задавать коллбэк через стрелочную функцию:
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 02.08.2018 11:25

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

bonny 02.08.2018 11:57

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


Часовой пояс GMT +3, время: 16:55.