Тобто справжній URL знаходиться в атрибуті realsrc (назва атрибута можна вибрати будь-який). А в src поставлений сірий GIF розміру 1x1, і так як width / height правильні, то він розтягується, так що замість зображення видно сірий прямокутник.
При цьому, щоб браузер завантажив зображення, потрібно замінити значення src на те, яке знаходиться в realsrc.
Якщо сторінка велика, то заміна великих зображень на такі макети істотно прискорює повне завантаження сторінки. Це особливо помітно в разі, коли на сторінці багато анонсів новин з картинками або зображень товарів, з яких багато хто перебуває за межами прокрутки.
Напишіть код, який при прокручуванні вікна завантажує стали видимими зображення.
Тобто, як тільки зображення потрапило в видиму частину документа - в src потрібно прописати правильний URL з realsrc.
Приклад роботи ви можете побачити в iframe нижче, якщо перейдіть його:
- При початковому завантаженні деякі зображення повинні бути видні відразу, до прокрутки. Код повинен це враховувати.
- Деякі зображення можуть бути звичайними, без realsrc. Їх код не повинен чіпати взагалі.
- Також код не повинен перевантажувати вже показане зображення.
- Бажано передбачити завантаження зображень не тільки видимих зараз, але і на сторінку вперед і назад від поточного місця.
P.S. Горизонтальної прокрутки немає.
Функція повинна за поточною прокручуванні визначати, які саме зображення видимі, і завантажувати їх.
Вона повинна спрацьовувати не тільки при прокручуванні, але і при завантаженні. Цілком достатньо для цього - вказати її виклик в скрипті під сторінкою, ось так:
При запуску функція шукає всі видимі картинки з realsrc і переміщує значення realsrc в src. Зверніть увагу, тому що атрибут realsrc нестандартний, то для доступу до нього ми використовуємо get / setAttribute. А src - стандартний, тому можна звернутися по DOM-властивості.
Функція перевірки видимості isVisible (elem) отримує координати поточної видимої області і порівнює їх з елементом.
Для видимості досить, щоб координати верхньої (або нижньої) межі елементу знаходилися між кордонами видимій області.
У рішенні також вказано варіант з isVisible. який розширює зону видимості на ± 1 сторінку (висота сторінки - document.documentElement.clientHeight).