holder
1.0.0
Держатель отображает заполнители изображения в браузере с использованием SVG.
Используется тысячами проектов с открытым исходным кодом (включая Bootstrap V3) и многими другими сайтами.
Нет дополнительных запросов, небольшой размер пакета, очень настраиваемый.
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js Включите holder.js в свой HTML:
< script src =" holder.js " > </ script > Держатель будет обрабатывать все изображения с определенным атрибутом src , как этот:
< img src =" holder.js/300x200 " >Вышеуказанный тег будет отображаться в ширине заполнителя 300 пикселей и 200 пикселей.
Чтобы избежать ошибок консоли 404, вы можете использовать data-src вместо src .
Для программного вставки заполнителя используйте API run() :
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; Параметры заполнителей устанавливаются с помощью URL -свойств, например, holder.js/300x200?x=y&a=b . Несколько вариантов разделены & характером.
theme : тема для использования для заполнителя. Пример: holder.js/300x200?theme=skyrandom : используйте случайную тему. Пример: holder.js/300x200?random=yesbg : Цвет фона. Пример: holder.js/300x200?bg=2a2025fg : передний план (текст) цвет. Пример: holder.js/300x200?fg=fffffftext : пользовательский текст. Пример: holder.js/300x200?text=Hellosize : пользовательский размер текста. По умолчанию подразделения pt . Пример: holder.js/300x200?size=50font : пользовательский текстовый шрифт. Пример: holder.js/300x200?font=Helveticaalign : пользовательское выравнивание текста (слева, справа). Пример: holder.js/300x200?align=leftoutline : Нарисуйте контур и диагонали для заполнителя. Пример: holder.js/300x200?outline=yeslineWrap : максимальная длина линии к ширине изображения. Пример: holder.js/300x200?lineWrap=0.5Holder включает в себя поддержку тем, чтобы помочь заполнителям в смешении с вашим макетом.
Есть 6 тем по умолчанию: sky , vine , lava , gray , industrial и social .
Темы имеют 5 свойств: fg , bg , size , font и fontweight . Свойство size указывает минимальный размер шрифта для темы. Значение по умолчанию fontweight bold . Вы можете создать образец такой темы, как это:
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ; Если у вас есть группа заполнителей, где вы хотите использовать конкретный текст, вы можете сделать это, добавив в тему text свойство:
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; Есть два способа использовать пользовательские темы с держателем:
Первый подход самый простой. После того, как вы включите holder.js , добавьте тег script , который добавляет нужную тему:
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script > Второй подход требует, чтобы вы run после добавления темы, например:
Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; Вы можете использовать держатель в разных областях на разных изображениях с индивидуальными темами:
< img data-src =" example.com/100x100?theme=simple " id =" new " > Holder . run ( {
domain : "example.com" ,
themes : {
"simple" : {
bg : "#fff" ,
fg : "#000" ,
size : 12
}
} ,
images : "#new"
} ) ; Вы можете добавить программно -заполнителя, призывая к прицелу:
Holder . addTheme ( "new" , {
fg : "#ccc" ,
bg : "#000" ,
size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ; Первым аргументом в addImage является атрибут src , а второй - селектор CSS родительского элемента.
Держатель автоматически добавляет разрывы линии к тексту, который выходит за пределы границ изображения. Если текст такой длинный, он выходит из горизонтальных и вертикальных границ, текст перемещается на вершину. Если вы предпочитаете контролировать разрывы строки, вы можете добавить n в свойство text :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " > Если вы хотите отключить обертывание линии, установите опцию nowrap на true :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&nowrap=true " > При использовании параметра text изображение не отображается. Чтобы вернуть измерение в текст, просто используйте Special holder_dimensions Placeholder.
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " > Заполнители, использующие пользовательский шрифт, отображаются с использованием Canvas по умолчанию из-за ограничений SVG на связывании ресурсов междомена. Если вы используете только локально доступные шрифты, вы можете отключить это поведение, установив noFontFallback на true in Holder.run . Однако, если вам нужно отобрать заполнителя SVG, используя шрифт с внешне загруженным, вам нужно использовать тег object вместо тега img и добавить класс holderjs в соответствующие теги link . Вот пример:
< head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object > Важно: при тестировании локально, URL -адреса шрифтов должны иметь определенный протокол http или https .
ВАЖНО: Шрифты, обслуживаемые в других местах, кроме публичных реестров (то есть Google шрифтов, Typekit и т. Д.), Требуются правильные заголовки CORS. Посмотрите, как использовать CDN с веб -офисами для получения более подробной информации.
<object> Заполнители работают как <img> Заполнители, причем дополнительное преимущество их DOM можно проверить и модифицировать. Как и в случае со стороны <img> заполнителей, атрибут data-src более надежна, чем атрибут data .
Важно: проценты указаны с персонажем p , а не с символом % .
Указание измерения в процентах создает жидкого заполнителя, который отвечает на запросы СМИ.
< img data-src =" holder.js/100px75?theme=social " > По умолчанию жидкий заполнитель покажет свой текущий размер в пикселях. Чтобы отобразить исходные размеры, то есть 100%x75, установите флаг textmode на literal , как SO: holder.js/100px75?textmode=literal .
Если вы хотите избежать обеспечения соблюдения размера изображения, используйте auto Flag так:
< img data-src =" holder.js/200x200?auto=yes " >Вышеуказанное сделает заполнитель без каких -либо встроенных CSS для высоты или ширины.
Чтобы показать текущий размер заполнителя автоматического размера, установите флаг textmode в exact , как SO: holder.js/200x200?auto=yes&textmode=exact .
Как жидкие заполнители, так и заполнители автоматического размера в точном режиме обновляются при изменении окна. Чтобы установить, обновляется ли конкретное изображение в изменении размера окна, вы можете использовать метод setResizeUpdate , как SO:
var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;Выше приведет в паузу любые обновления рендеринга на указанном изображении (которое должно быть объектом DOM).
Чтобы снова включить обновления, запустите следующее:
Holder . setResizeUpdate ( img , true ) ;Это обеспечит обновления и немедленно сделает заполнитель.
Держатель может отображать заполнители в качестве фоновых изображений для элементов с классом holderjs , как это:
# sample { background : url(?holder.js / 200 x200?theme=social) no-repeat} < div id =" sample " class =" holderjs " > </ div > У URL -держателя в CSS должен быть ? спереди. Как и в заполнителе изображения, вы можете указать URL-адрес держателя в атрибуте data-background-src :
< div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >Важно: обязательно определите высоту и/или ширину для элементов с фоновыми заполнителями. Жидкие фоновые заполнители еще не поддерживаются.
Holder предоставляет несколько вариантов во время выполнения, которые влияют на процесс генерации изображений. Они передаются через Holder.run Calls.
domain : домен для использования для генерации изображений. Значение по умолчанию: holder.js .dataAttr : атрибут HTML, используемый для определения запасного отдела на собственном атрибуте src . Значение по умолчанию: data-src .renderer : рендерер для использования. Доступны варианты: svg , canvas . Значение по умолчанию: svg .images : селектор CSS, используемый для поиска тегов img . Значение по умолчанию: img .objects : Селектор CSS, используемый для поиска заполнителей object . Значение по умолчанию: object .bgnodes : Селектор CSS, используемый для поиска элементов, которые имеют фоновые палочки. Значение по умолчанию: body .holderjs .stylenodes : Селектор CSS, используемый для поиска таблиц стилей для импорта в SVG -заполнители. Значение по умолчанию: head link.holderjs .noFontFallback : не возвращайтесь к холсту, если используете пользовательские шрифты.noBackgroundSize : не устанавливайте background-size для фоновых заполнителей. Вы можете не дать Holder запустить свою конфигурацию по умолчанию, выполнив Holder.run с вашими пользовательскими настройками сразу после включения holder.js . Тем не менее, вам придется снова выполнить Holder.run , чтобы отобрать любых заполнителей, которые используют конфигурацию по умолчанию.
Держатель совместим с lazyload.js и работает с изображениями как жидкости, так и с фиксированной шириной. Для достижения наилучших результатов запустите .lazyload({skip_invisible:false}) .
При использовании держателя в компоненте React выполните Holder.run в componentDidMount , чтобы включить рендеринг после изменений состояния. Смотрите эту проблему для более подробной информации.
Вы можете использовать Holder в проектах Vue 2+ с Vue-Holderjs.
Вы можете использовать держателя в угловых проектах с помощью NG-держателя или с Angular-2-Holderjs для Angular 2 Projects.
Поскольку метеор включает в себя сценарии в верхней части документа по умолчанию, DOM может быть недоступен при вызове держателя. По этой причине код, связанный с держателем, в прослушивателе «Готов от DOM».
Если вы используете ProvidePlugin в конфигурации WebPack, обязательно настройте его следующим образом:
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] Владелец предоставляется по лицензии MIT.
Holder - это проект Ивана Малопинского.
