Контекст в функции
Привет. Не понимаю как сделать в this.img.onload = function() верный контекст для установки значений и запуска функции...
originalPreview = el.src; // Save original pic el.src = external; // Replace pic //fullOpen(); https://codepen.io/THEb0nny/pen/NBYPEO Начиная. 288 строка. Скрипт, который открывает картинку. Хочу переделать, чтобы была возможность открывать превью заменой ссылки. |
bonny, где переменная el инициализируется?
Если нужно сохранить в переменную originalPreview адрес загруженного в текущий момент изображения, то el замените на this. |
Цитата:
Ну вот я написал... Но указать 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 я сохраню предыдущий адрес, чтобы когда картинку закрыть, то поменять обратно адрес. |
Don't understand :-?
|
Было как.
<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, чтобы проверить загрузиться ли вообще картинка полная, а в неё (функцию) кидаю код замены и дальше уже полного открытия... Но вот проблема с контекстами. |
Событие принудительно ставит "контекстом" коллбэка сам элемент вызвавший событие.
Есть множество вариантов борьбы с этим, но ИМХО, только два достойны использования: Задавать коллбэк через стрелочную функцию: 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); } //... }что отлично сочетается с ООП. |
Dilettante_Pro, А ну я тупанул, назвав originalPreview. Там оригинальная картинка - el.src должна быть.
originalPic я установлю в функции onload (как проверим доступна ли картинка по адресу) и там дальше всю работу сделать нужно. А контекст не знаю как выставить. this.external это у нас data-external="https://lorempixel.com/800/400/nature/4". |
Aetae, благодарю.
|
Часовой пояс GMT +3, время: 16:55. |