holder 다운로드 - holder 소스 코드 다운로드

holder

기타 소스코드

1.0.0

다운로드

보유자

보유자는 SVG를 사용하여 브라우저에서 이미지 자리 표시기를 렌더링합니다.

수천 개의 오픈 소스 프로젝트 (부트 스트랩 V3 포함) 및 기타 여러 사이트에서 사용됩니다.

추가 요청, 작은 번들 크기, 고도로 사용자 정의 할 수 없습니다.

설치

NPM : npm install holderjs
원사 : yarn add holderjs
unpkg : https://unpkg.com/holderjs
cdnjs : https://cdnjs.com/libraries/holder
jsdelivr : https://www.jsdelivr.com/package/npm/holderjs
Bower : bower install holderjs
Rails Assets : gem 'rails-assets-holderjs'
Meteor : meteor add imsky:holder
작곡가 : php composer.phar update imsky/holder
Nuget : Install-Package Holder.js

용법

html에 holder.js 포함 시키십시오 :

 < script src =" holder.js " > </ script >

그런 다음 홀더는 모든 이미지를 특정 src 속성으로 처리합니다.

 < img src =" holder.js/300x200 " >

위의 태그는 400 픽셀 폭과 높이 200 픽셀로 자리 표시 자로 렌더링됩니다.

콘솔 404 오류를 피하려면 src 대신 data-src 사용할 수 있습니다.

프로그래밍 방식 사용

프로그래밍 방식으로 자리 표시자를 삽입하려면 run() API를 사용하십시오.

 var myImage = document . getElementById ( 'myImage' ) ;

Holder . run ( {
  images : myImage
} ) ;

자리 표시 자 옵션

자리 표시기 옵션은 URL 속성 (예 : holder.js/300x200?x=y&a=b 통해 설정됩니다. 여러 옵션이 & 문자로 분리됩니다.

theme : 자리 표시 자에게 사용할 테마. 예 : holder.js/300x200?theme=sky
random : 임의의 테마를 사용하십시오. 예 : holder.js/300x200?random=yes
bg : 배경색. 예 : holder.js/300x200?bg=2a2025
fg : 전경 (텍스트) 색상. 예 : holder.js/300x200?fg=ffffff
text : 사용자 정의 텍스트. 예 : holder.js/300x200?text=Hello
size : 사용자 정의 텍스트 크기. 기본값은 pt 장치에 나타납니다. 예 : holder.js/300x200?size=50
font : 사용자 정의 텍스트 글꼴. 예 : holder.js/300x200?font=Helvetica
align : 사용자 정의 텍스트 정렬 (왼쪽, 오른쪽). 예 : holder.js/300x200?align=left
outline : 자리 표시자를위한 개요 및 대각선을 그립니다. 예 : holder.js/300x200?outline=yes
lineWrap : 최대 선 길이 대 이미지 너비 비율. 예 : holder.js/300x200?lineWrap=0.5

테마

홀더에는 자리 표시자가 당신의 레이아웃과 혼합 할 수 있도록 테마 지원이 포함되어 있습니다.

sky , vine , lava , gray , industrial 및 social 6 가지 기본 테마가 있습니다.

테마 사용자 정의

테마에는 fg , bg , size , font 및 fontweight 5 가지 속성이 있습니다. 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 선택기입니다.

텍스트

홀더는 이미지 경계를 벗어난 텍스트에 라인 브레이크를 자동으로 추가합니다. 텍스트가 너무 길면 수평 및 수직 경계가 모두 나옵니다. 텍스트는 상단으로 이동됩니다. 라인 브레이크를 제어하려면 text 속성에 n 추가 할 수 있습니다.

 < 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.&amp;nowrap=true " >

text 옵션을 사용하면 이미지 다임션이 표시되지 않습니다. 치수를 텍스트로 다시 삽입하려면 Special holder_dimensions 자리 표시자를 사용하십시오.

 < img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " >

커스텀 글꼴을 사용하는 자리 표시자는 크로스 도메인 리소스 링크에 대한 SVG의 제약으로 인해 기본적으로 캔버스를 사용하여 렌더링됩니다. 로컬로 사용 가능한 글꼴 만 사용하는 경우 Holder.run 옵션에서 noFontFallback true 로 설정 하여이 동작을 비활성화 할 수 있습니다. 그러나 외부로드 글꼴을 사용하여 SVG 자리 표시기를 렌더링 해야하는 경우 img 태그 대신 object 태그를 사용하고 적절한 link 태그에 holderjs 클래스를 추가해야합니다. 예는 다음과 같습니다.

 < head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object >

중요 : 로컬로 테스트 할 때 FONT URL에는 http 또는 https 프로토콜이 정의되어 있어야합니다.

중요 : 공개 레지스트리 (예 : Google Fonts, Typekit 등) 이외의 위치에서 제공되는 글꼴에는 올바른 CORS 헤더를 설정해야합니다. 자세한 내용은 WebFonts와 함께 CDN을 사용하는 방법을 참조하십시오.

<object> 자리 표시자는 <img> 자리 표시 자와 같은 일을하며, DOM의 추가 혜택은 검사 및 수정 될 수 있습니다. <img> 자리 표시 자와 마찬가지로 data-src 속성은 data 속성보다 더 신뢰할 수 있습니다.

유동적 인 자리 소유자

중요 : 백분율은 % 문자가 아닌 p 문자로 지정됩니다.

치수를 백분율로 지정하면 미디어 쿼리에 응답하는 유동적 인 자리 표시자가 생성됩니다.

 < img data-src =" holder.js/100px75?theme=social " >

기본적으로 유체 자리 표시자는 현재 크기를 픽셀로 표시합니다. 원래 치수 (예 holder.js/100px75?textmode=literal 100%x75)를 표시하려면 textmode 플래그를 literal 설정하십시오.

자동으로 크기의 자리 표시 자

이미지 크기를 시행하는 홀더를 피하려면 다음과 같은 auto 플래그를 사용하십시오.

 < img data-src =" holder.js/200x200?auto=yes " >

위의 내용은 높이 또는 너비에 대한 내장 된 CSS없이 자리 표시자를 렌더링합니다.

자동으로 크기 holder.js/200x200?auto=yes&textmode=exact 자리 표시 자의 현재 크기를 표시하려면 textmode 플래그를 exact 다음과 같이 설정하십시오.

창의 업데이트 방지 크기 조정

정확한 모드의 유체 자리 표시 자와 자동으로 크기의 자리 표시자는 창을 크기를 조정할 때 업데이트됩니다. Window Resize에서 특정 이미지가 업데이트되는지 여부를 설정하려면 setResizeUpdate 메소드를 사용할 수 있습니다.

 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 >

CSS의 홀더 URL에 A가 있어야합니까 ? 앞에. 이미지 자리 표시기와 마찬가지로 data-background-src 속성에서 홀더 URL을 지정할 수 있습니다.

 < div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >

중요 : 배경 자리 표시자가있는 요소의 높이 및/또는 너비를 정의하십시오. 유체 배경 자리 표시자는 아직 지원되지 않습니다.

런타임 설정

홀더는 런타임에 이미지 생성 프로세스에 영향을 미치는 몇 가지 옵션을 제공합니다. 이들은 Holder.run 전화를 통해 전달됩니다.

domain : 이미지 생성에 사용할 도메인. 기본값 : holder.js .
dataAttr : 기본 src 속성으로의 폴백을 정의하는 데 사용되는 HTML 속성. 기본값 : data-src .
renderer : 사용할 렌더러. 사용 가능한 옵션 : svg , canvas . 기본값 : svg .
images : img 태그를 찾는 데 사용되는 CSS 선택기. 기본값 : img .
objects : object 자리 표시자를 찾는 데 사용되는 CSS 선택기. 기본값 : object .
bgnodes : 배경 Palceholder가있는 요소를 찾는 데 사용되는 CSS 선택기. 기본값 : body .holderjs .
stylenodes : SVG 자리 표시 자로 가져 오기 위해 스타일 시트를 찾는 데 사용되는 CSS 선택기. 기본값 : head link.holderjs .
noFontFallback : 사용자 정의 글꼴을 사용하는 경우 캔버스로 돌아 가지 마십시오.
noBackgroundSize : 배경 자리 표시자를 위해 background-size 설정하지 마십시오.

로드에서 사용자 정의 설정을 사용합니다

holder.js 포함한 직후에 사용자 정의 설정으로 Holder.run 실행하여 홀더가 기본 구성을 실행하는 것을 방지 할 수 있습니다. 그러나 기본 구성을 사용하는 자리 표시자를 렌더링하려면 Holder.run 다시 실행해야합니다.

lazyload.js와 함께 사용

Holder는 lazyload.js 와 호환되며 유체 및 고정형 이미지와 함께 작동합니다. 최상의 결과를 얻으려면 .lazyload({skip_invisible:false}) 실행하십시오.

React와 함께 사용

React 구성 요소에서 홀더를 사용하는 경우 Holder.run componentDidMount 에서 실행하여 상태 변경 후 렌더링을 활성화하십시오. 자세한 내용은이 문제를 참조하십시오.

Vue와 함께 사용합니다

Vue-HolderJS와 함께 Vue 2+ 프로젝트의 홀더를 사용할 수 있습니다.

Angular.js와 함께 사용합니다

Angular 2 프로젝트를 위해 Ng-Holder 또는 Angular-2-HolderJ와 함께 각도 프로젝트에 보유자를 사용할 수 있습니다.

유성과 함께 사용

Meteor에는 기본적으로 문서 상단에 스크립트가 포함되어 있으므로 홀더가 호출되면 DOM을 완전히 사용할 수 없습니다. 이러한 이유로 "Dom Ready"이벤트 리스너에 보유자 관련 코드를 배치하십시오.

웹 팩과 함께 사용합니다

Webpack Config에서 ProvidePlugin 사용하는 경우 다음과 같이 구성하십시오.

plugins: [
  new webpack . ProvidePlugin ( {
    'Holder' : 'holderjs' ,
    'holder' : 'holderjs' ,
    'window.Holder' : 'holderjs'
  } )
]

브라우저 지원

크롬
Firefox 3+
사파리 4+
Internet Explorer 9+ (6-8에 대한 부분 지원)
오페라 12+
안드로이드 (폴백 포함)

원천

github : https://github.com/imsky/holder
gitlab : https://gitlab.com/imsky/holder

특허

홀더는 MIT 라이센스에 따라 제공됩니다.

크레딧

Holder는 Ivan Malopinsky의 프로젝트입니다.

확장하다

추가 정보

버전 1.0.0
유형 기타 소스코드
업데이트 시간 2025-06-04
크기 186.14KB
출처 Github