Домашня » Інструментарій » Поступово надає вам Lazy Load Images з ванільним JS

    Поступово надає вам Lazy Load Images з ванільним JS

    Кожен сучасний веб-сайт повинен бути швидким. Хоча існує багато методів і плагінів для збільшення швидкості сторінки, все ж таки, ви можете не знати, з чого почати.

    Прогресивний сценарій a великий ресурс для збільшення швидкості сторінки. Він працює як лінивий завантажувальний скрипт, який завантажує зображення поступово, коли користувач прокручує сторінку вниз.

    Це безкоштовний проект з відкритим кодом, тому ви можете завантажити його і запустити на будь-якому веб-сайті. Плюс це працює на 100% ванілі JS, так що у нього нульові залежності, які можуть зважити вас.

    Ви можете ознайомитися з демонстрацією на живій сторінці Progressively.

    Це трохи відрізняється від інших ледачих завантажувальних скриптів, тому що він зберігає фіксований розмір зображення для всієї сторінки. Це перешкоджає тому, що коли-небудь набридливе пересування сторінки відображатиметься, коли зображення швидко завантажуються і збільшити висоту вмісту.

    А заповнювачі зображень насправді виглядають як зображення, які ви завантажуєте. Високий!

    Ця акуратна техніка дає можливість відвідувачам Попередній перегляд зображень перед завантаженням. Все це виконується за допомогою JavaScript, який перевіряє місцезнаходження користувача на сторінці та попередньо завантажує зображення під час перегляду.

    Поступово має a досить широкий API тому це відмінний вибір для веб-розробників. Налаштування може отримати технічну, тому це допоможе, якщо ви знаєте свій шлях навколо базового кодування фронтэнду.

    Але ви можете дізнатися більше про головну сторінку GitHub, яка включає в себе повну документацію API, інструкції з налаштування та зразки коду, які ви можете скопіювати / вставити для своїх проектів..

    Якщо вам потрібен надійний скрипт зображення без навантажень, без зайвих залежностей подайте Progressively постріл. Він абсолютно безкоштовний і пропонує велику кількість налаштувань для розробників.

    Також зверніть увагу на Progressively GitHub, щоб дізнатися більше і знайти завантажуваний вихідний код.