April 10th, 2020

IE11 - как объявить class? Решение ошибки SCRIPT 1002

 class myClass {
     myfunction() {
         return true;
     }
 }
var mes = new myClass;
mes.myfunction(); // return true;




Дело в том, что IE, а точнее встроенный в него стандарт javascript ES5 не поддерживает классы (а объявление классов уже относится к ES6) и соответственно вышеприведенный код будет выдавать ошибку . Таблицу совместимости можно посмотреть тут

Что же делать?
Первый вариант. Переписать код без объявления классов, согласно стандарту ES5. Например:


mes = {};
mes.myfunction = function(){
    return true;
}



mes.myfunction(); // return true;



Или второй вариант. Использовать babel https://babeljs.io/repl
вставить ваш код с классом и получить сгенерированный код такойже функциональности для es5. (слева необходимо отметить в Presets es2015)
Полученный сгенерированный код приводить не буду, т.к. он занимает очень много строк. Вы сами можете его сгенерировать и посмотреть.

lazy loading. черновик

1. Нативная ленивая загрузка встроенная в браузер.
Ван не надо писать никакой код, кроме добавления атрибута  в <img loading='lazy'> браузер
и браузер Chrome всё сделает за вас. Однако этот атрибут поддерживают не все браузеры.
Например Safary(декстоп и мобильный), а также android FireFox - не поддержижвает.

https://mathiasbynens.be/demo/img-loading-lazy - страница с кучей картнок кошек. Пример поддержки гугл хрома с встроенной поддержкой lazyloading.
Подбробнее об этом: https://web.dev/native-lazy-loading/ и https://css-tricks.com/a-native-lazy-load-for-the-web-platform/


2. Пишем сами.
https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/
https://habr.com/ru/company/ruvds/blog/448914/ - использование нативной загрузки описанной в п1. и стороннего скрипта (для тех браузеров, кто не поддерживает)


https://siteclinic.ru/blog/internal-optimization/lazy-load/