Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2018, 10:11
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

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

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


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

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

Скрипт, который открывает картинку. Хочу переделать, чтобы была возможность открывать превью заменой ссылки.
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2018, 10:23
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

bonny, где переменная el инициализируется?
Если нужно сохранить в переменную originalPreview адрес загруженного в текущий момент изображения, то el замените на this.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2018, 10:28
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

Сообщение от Nexus Посмотреть сообщение
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 я сохраню предыдущий адрес, чтобы когда картинку закрыть, то поменять обратно адрес.

Последний раз редактировалось bonny, 02.08.2018 в 10:37.
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2018, 10:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

Don't understand
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2018, 10:53
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

Было как.
<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, чтобы проверить загрузиться ли вообще картинка полная, а в неё (функцию) кидаю код замены и дальше уже полного открытия... Но вот проблема с контекстами.

Последний раз редактировалось bonny, 02.08.2018 в 11:05.
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2018, 11:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,917

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

Есть множество вариантов борьбы с этим, но ИМХО, только два достойны использования:
Задавать коллбэк через стрелочную функцию:
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);
  }
  //...
}
что отлично сочетается с ООП.
__________________
29375, 35

Последний раз редактировалось Aetae, 02.08.2018 в 11:28.
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2018, 11:25
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

Dilettante_Pro, А ну я тупанул, назвав originalPreview. Там оригинальная картинка - el.src должна быть.
originalPic я установлю в функции onload (как проверим доступна ли картинка по адресу) и там дальше всю работу сделать нужно. А контекст не знаю как выставить.
this.external это у нас data-external="https://lorempixel.com/800/400/nature/4".
Ответить с цитированием
  #8 (permalink)  
Старый 02.08.2018, 11:57
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

Aetae, благодарю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение прототипа функции tsigel Общие вопросы Javascript 11 15.05.2014 00:03
Контекст функции при вызове по таймеру Bombus Общие вопросы Javascript 15 14.11.2013 06:37
В callback функции теряется контекст. Как это обойти? xintrea AJAX и COMET 4 02.06.2013 10:40
arguments вызвавшей функции mister_maxim Общие вопросы Javascript 4 12.10.2010 15:21
тест magistr_bender Оффтопик 44 25.10.2008 18:28