Встречается на собеседованиях • сегодня
Как будешь реализовывать ленивую загрузку картинок
Использую атрибут `loading="lazy"` для нативных lazy loading изображений:
```html
```
Для более гибкого подхода (например, если нужен fallback или кастомные placeholder'ы) - Intersection Observer API:
```javascript
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
```
HTML в этом случае:
```html
```
Для React можно использовать библиотеки типа `react-lazyload` или аналоги.
```
Для более гибкого подхода (например, если нужен fallback или кастомные placeholder'ы) - Intersection Observer API:
```javascript
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
```
HTML в этом случае:
```html
```
Для React можно использовать библиотеки типа `react-lazyload` или аналоги.
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы