Одним из лучших улучшений HTML за последние годы стал атрибут loading="lazy", который можно добавлять к изображениям (также iframe), который будет сообщать браузерам не загружать изображение, пока оно не окажется в области просмотра.

Очень просто и очень полезно. Но было бы здорово, если бы вы могли сделать то же самое и для сценариев. Чтобы вы могли лениво загружать свои компоненты, только если/когда они действительно необходимы...

Ну, еще одна особенность элемента — это возможность запуска скрипта после того, как изображение загружается (или не загружается) с атрибутами onload и onerror.

Этот «обратный вызов» при загрузке будет запущен только тогда, когда это изображение загружено, и если изображение было лениво загружено, то он будет срабатывать только тогда, когда изображение находится в области просмотра. И вуаля! Лениво загружаемый скрипт.

К сожалению, в этом случае от него мало пользы. Во-первых, на вашей странице появится нежелательное изображение, а во-вторых, вам нужно будет встроить JavaScript, который вы хотите запустить, что в некотором роде противоречит цели отложенной загрузки. Итак, давайте внесем некоторые изменения, чтобы улучшить ситуацию.

Само изображение может быть чем угодно или, что более важно, ничем. Как я упоминал ранее, существует обратный вызов onerror, который, как следует из названия, срабатывает, когда изображение не загружается.

Это не означает, что вам нужно указать src на несуществующее изображение, иначе консоль будет заполнена красными ошибками 404 об отсутствующих изображениях, а этого никто не хочет.

Обратный вызов onerror также срабатывает, если изображение src на самом деле не является изображением, и самый простой способ сделать это — «плохо закодировать» изображение с использованием формата data:. Преимущество этого также заключается в том, что консоль не заполняется предупреждениями об отсутствующих изображениях ?

Это все равно приведет к тому, что на странице будет миниатюра «разбитого изображения», но мы еще вернемся к этому.

Хорошо, но нам все равно нужно встроить JavaScript, который мы хотим запустить, так как это исправить?

Ну, теперь, когда поддержка модулей ES практически универсальна, мы можем использовать очень мощную технику загрузки javascript event-import-then-default для загрузки сценария после запуска события, например:

Примечание: это также работает для событий onclick, onchange и т. д.
Примечание: подчеркивания — это всего лишь сокращенный способ доступа к модулю. Вы также можете написать .then(Module => Module.default(this))

Хорошо, и что здесь происходит!?

Давайте сначала посмотрим, как может выглядеть некоторый компонент:

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

Итак, вы могли заметить, что в обратном вызове onerror я передал это как аргумент для экспорта по умолчанию. Причина, по которой я сделал это (простите за каламбур ?), заключалась в том, чтобы передать скрипту , который его вызывал, поскольку в этом (я сделал это снова ?) контексте this = .

Теперь вы можете просто element.outerHTML заменить испорченное изображение вашей HTML-разметкой, и вот он, лениво загружаемые скрипты! ?

Кэширование и передача аргументов

Если вы используете этот метод на странице более одного раза, вам нужно будет передать в данные индекс «очистки кеша» или случайное число: например, что-то вроде:

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

Очень простой способ передать параметры в функцию — использовать атрибут data-something в HTML, например:

Поскольку мы передаем this в функцию, вы можете получить доступ к атрибутам данных следующим образом:

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        

            
${message}
        
    `;
}

Пожалуйста, дайте мне знать, что вы думаете в комментариях! ❤️