Загрузка изображений

Bliss.js предоставляет удобный и лаконичный интерфейс для работы с DOM, включая загрузку и обработку изображений. Основной принцип заключается в том, что библиотека расширяет стандартные возможности JavaScript, добавляя методы для асинхронной загрузки и управления элементами <img>.

Создание и вставка изображений

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

let img = B.create('img', { src: 'photo.jpg', alt: 'Описание изображения' });
B('body').append(img);

Ключевые моменты:

  • Атрибуты src и alt можно задавать сразу при создании.
  • Метод B.create возвращает полноценный DOM-элемент, совместимый с методами Bliss.js.
  • Элемент можно вставить в любое место DOM с помощью метода append или prepend.

Асинхронная загрузка изображений

Bliss.js упрощает отслеживание состояния загрузки через метод on, который позволяет подписаться на события load и error:

B.create('img', { src: 'photo.jpg' })
 .on('load', function() {
     console.log('Изображение успешно загружено');
 })
 .on('error', function() {
     console.log('Ошибка при загрузке изображения');
 })
 .appendTo('body');

Особенности:

  • Событие load срабатывает только после полной загрузки изображения.
  • Событие error позволяет обрабатывать недоступные ресурсы и подменять изображения по необходимости.

Загрузка нескольких изображений

Для одновременной загрузки множества изображений Bliss.js позволяет использовать коллекции элементов и методы обхода:

let images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
B.each(images, function(src) {
    B.create('img', { src: src })
     .on('load', function() {
         console.log(src + ' загружено');
     })
     .appendTo('body');
});

Ключевые аспекты:

  • B.each обеспечивает перебор массивов или коллекций DOM-элементов.
  • Поддерживается вложенная логика для обработки каждого изображения отдельно.
  • Позволяет реализовать прогресс-бар или индикатор загрузки.

Предварительная загрузка изображений

Предварительная загрузка (preload) полезна для подготовки ресурсов перед отображением:

let preload = B.create('img', { src: 'background.jpg' });
preload.on('load', function() {
    document.body.style.backgroundImage = `url(${this.src})`;
});
  • Изображение создается в памяти, но не обязательно сразу добавляется в DOM.
  • Это позволяет избегать визуальных задержек при смене фона или отображении галерей.

Управление атрибутами после загрузки

Bliss.js поддерживает динамическое изменение атрибутов через метод attr:

let img = B('img#main');
img.attr('src', 'new_photo.jpg')
   .on('load', function() {
       console.log('Новое изображение загружено');
   });

Особенности:

  • Любой элемент <img> можно обновлять без пересоздания.
  • Обновление атрибута src автоматически инициирует повторную загрузку.
  • Подписка на события load и error может быть привязана к каждому обновлению.

Использование промисов для загрузки

Bliss.js поддерживает интеграцию с промисами, что позволяет строить цепочки асинхронных действий:

function loadImage(src) {
    return new Promise((resolve, reject) => {
        B.create('img', { src: src })
         .on('load', function() { resolve(this); })
         .on('error', function() { reject(new Error('Не удалось загрузить ' + src)); })
         .appendTo('body');
    });
}

loadImage('gallery.jpg')
    .then(img => console.log('Изображение загружено', img))
    .catch(err => console.error(err));
  • Метод позволяет интегрировать загрузку изображений в более сложные цепочки асинхронной логики.
  • Удобно для работы с галереями, слайдерами или ленивой подгрузкой.

Ленивое подключение изображений

Bliss.js облегчает ленивую загрузку за счет отслеживания видимости элемента на странице. Комбинируя on и события скролла, можно реализовать подгрузку только при необходимости:

B('img.lazy').on('appear', function() {
    this.src = this.dataset.src;
});
  • Событие appear срабатывает при попадании элемента в видимую область.
  • Позволяет оптимизировать загрузку и экономить трафик.
  • Атрибут data-src хранит исходный путь до загрузки.

Обработка ошибок и fallback

Bliss.js позволяет задавать запасные варианты изображений через цепочку методов:

B.create('img', { src: 'main.jpg' })
 .on('error', function() {
     this.src = 'fallback.jpg';
 })
 .appendTo('body');
  • Простое управление fallback изображениями без сложных условий.
  • Позволяет поддерживать корректное отображение даже при недоступных ресурсах.

Итоговые возможности

Bliss.js объединяет в себе:

  • Создание и вставку изображений.
  • Асинхронную загрузку с обработкой событий load и error.
  • Предварительную загрузку и ленивую подгрузку.
  • Динамическое управление атрибутами и поддержкой промисов.
  • Удобную работу с множеством изображений через коллекции и методы обхода.

Эта функциональность делает библиотеку мощным инструментом для работы с изображениями, обеспечивая простую интеграцию с любыми интерфейсными задачами в браузере.

Оглавление