lozad.js
1.0.0
Высокопрофессиональный, легкий и настраиваемый ленивый загрузчик в Pure JS без зависимостей для изображений, iframes и многого другого, используя API recesectionObserver
И еще много ...
Существующие ленивые библиотеки загрузки подключаются к событию прокрутки или используют периодический таймер и вызовут getBoundingClientRect() на элементах, которые необходимо загрузить ленивым. Этот подход, однако, мучительно медленный, так как каждый призыв getBoundingClientRect() заставляет браузер повторно провести всю страницу и представит значительный удар на ваш сайт.
Делать это более эффективным и эффективным - это то, для чего предназначен recsectionObserver, и он приземляется в Chrome 51. RecsectionObservers дает вам знать, когда наблюдаемый элемент входит или выходит из просмотра браузера.
# You can install lozad with npm
$ npm install --save lozad
# Alternatively you can use Yarn
$ yarn add lozad
# Another option is to use Bower
$ bower install lozadЗатем с модулем, таким как Rollup или Webpack, используйте, как что -нибудь еще:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) Или загрузите через CDN и включите в head метку вашей страницы.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > При загрузке из CDN вы можете найти библиотеку на window.lozad .
В HTML добавьте идентификатор к элементу (выявленный селектор по умолчанию - класс lozad ):
< img class =" lozad " data-src =" image.png " >Все, что вам нужно сделать сейчас, это просто экземпляр Лозада следующим образом:
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; или со ссылкой на Element DOM:
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;или с пользовательскими параметрами:
const observer = lozad ( '.lozad' , {
rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
threshold : 0.1 , // ratio of element convergence
enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;Ссылка:
или если вы хотите дать пользовательское определение функции для загрузки элемента:
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; Если вы хотите расширить loaded состояние элементов, вы можете добавить загруженную опцию:
ПРИМЕЧАНИЕ . Атрибут
"data-loaded"="true"используется Lozad, чтобы определить, был ли элемент ранее загружен.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;Если вы хотите ленить нагрузку динамически добавленные элементы:
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as wellДля использования с отзывчивыми изображениями
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >Для использования с фоновыми изображениями
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >Для использования с несколькими фоновыми изображениями
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >Для использования с отзывчивыми фоновыми изображениями (набор изображений)
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >Чтобы изменить разделитель, который расщепляет фоновые изображения:
<!-- custom delimiter for background images example -->
< div
class =" lozad "
data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
data-background-delimiter =" - "
>
</ div >Если вы хотите загрузить изображения, прежде чем они появятся:
const observer = lozad ( ) ;
observer . observe ( ) ;
const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;Иногда загрузка изображения занимает много времени. Для этого случая вы можете добавить фон заполнителя:
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad устанавливает цвет фона заполнителя элемента IMG, и пользователи увидят запасную сторону, пока изображение не загрузится.
Создайте сломанную структуру элемента изображения.
Т.е. браузер не поддерживает тег изображения! Вам необходимо установить атрибут
data-iesrc(только для ваших тегов изображения) с источником для браузера IE
Атрибут
data-altможно добавить в тег изображения для использования вaltАтрибут с ленивыми нагруженными изображениями
<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- NO img element -->
<!-- instead of img element, there will be the last source with the minimum dimensions -->
<!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >Когда Лозад загрузит этот элемент изображения, он исправит его.
Если вы хотите использовать заполнитель изображения (например, заполнитель низкокачественного изображения), вы можете установить временный тег img внутри тега picture . Он будет удален, когда Лозад загружает элемент изображения.
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
< img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture > < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
< source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
< source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video > < iframe data-src =" embed.html " class =" lozad " > </ iframe > Вот и все, просто добавьте класс lozad .
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > active класс будет переключаться на элементе, когда он входит в просмотр браузера.
Доступно в последних браузерах. Если поддержка браузеров недоступна, используйте полифилл.
Для поддержки IE11, пожалуйста, используйте эти полифиллы.
Оформить FAQ Wiki для некоторых общих GotChas, чтобы знать, используя lozad.js
Заинтересованы в содействии функциям и исправлениям?
Узнайте больше о вклад.
Смотрите изменение
MIT © Apoorv Saxena
