holder
1.0.0
O titular renderiza os espaços reservados de imagem no navegador usando o SVG.
Usado por milhares de projetos de código aberto (incluindo o Bootstrap V3) e muitos outros sites.
Sem solicitações extras, tamanho pequeno do pacote, altamente personalizável.
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js Inclua holder.js em seu html:
< script src =" holder.js " > </ script > O titular processará todas as imagens com um atributo src específico, como este:
< img src =" holder.js/300x200 " >A tag acima renderá como um espaço reservado com 300 pixels de largura e 200 pixels de altura.
Para evitar erros do console 404, você pode usar data-src em vez do src .
Para inserir programaticamente um espaço reservado, use a API run() :
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; As opções de espaço reservado são definidas através de propriedades de URL, por exemplo, holder.js/300x200?x=y&a=b . Várias opções são separadas pelo & .
theme : O tema a ser usado para o espaço reservado. Exemplo: holder.js/300x200?theme=skyrandom : Use tema aleatório. Exemplo: holder.js/300x200?random=yesbg : Cor de fundo. Exemplo: holder.js/300x200?bg=2a2025fg : Cor de primeiro plano (texto). Exemplo: holder.js/300x200?fg=fffffftext : texto personalizado. Exemplo: holder.js/300x200?text=Hellosize : Tamanho do texto personalizado. Padrões para unidades pt . Exemplo: holder.js/300x200?size=50font : Fonte de texto personalizada. Exemplo: holder.js/300x200?font=Helveticaalign : Alinhamento de texto personalizado (esquerda, direita). Exemplo: holder.js/300x200?align=leftoutline : Desenhe contorno e diagonais para espaço reservado. Exemplo: holder.js/300x200?outline=yeslineWrap : Comprimento máximo da linha para a proporção de largura da imagem. Exemplo: holder.js/300x200?lineWrap=0.5O titular inclui suporte para temas, para ajudar os espaços reservados a se misturarem com seu layout.
Existem 6 temas padrão: sky , vine , lava , gray , industrial e social .
Os temas têm 5 propriedades: fg , bg , size , font e fontweight . A propriedade size especifica o tamanho mínimo da fonte para o tema. O valor padrão do fontweight é bold . Você pode criar um tema de amostra como este:
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ; Se você tem um grupo de espaço reservado onde deseja usar texto específico, pode fazê -lo adicionando uma propriedade text ao tema:
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; Existem duas maneiras de usar temas personalizados com o titular:
A primeira abordagem é a mais fácil. Depois de incluir holder.js , adicione uma tag script que adiciona o tema que deseja:
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script > A segunda abordagem exige que você ligue run após adicionar o tema, como este:
Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; Você pode usar o suporte em diferentes áreas em diferentes imagens com temas personalizados:
< 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"
} ) ; Você pode adicionar um espaço reservado programaticamente, encadeando chamadas de titular:
Holder . addTheme ( "new" , {
fg : "#ccc" ,
bg : "#000" ,
size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ; O primeiro argumento no addImage é o atributo src , e o segundo é um seletor CSS do elemento pai.
O suporte adiciona automaticamente quebras de linha ao texto que sai dos limites da imagem. Se o texto for tão longo, sair dos limites horizontal e vertical, o texto será movido para o topo. Se você preferir controlar as quebras da linha, poderá adicionar n à propriedade text :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " > Se você deseja desativar a embalagem de linhas, defina a opção nowrap como true :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&nowrap=true " > Ao usar a opção text , as dimesões de imagem não são mostradas. Para reinserir a dimensão no texto, use simples o espaço reservado para holder_dimensions .
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " > Os espaços reservados que usam uma fonte personalizada são renderizados usando tela por padrão, devido às restrições do SVG na ligação de recursos de domínio cruzado. Se você estiver usando apenas fontes disponíveis localmente, poderá desativar esse comportamento definindo noFontFallback para true nas opções de Holder.run . No entanto, se você precisar renderizar um espaço reservado SVG usando uma fonte carregada externamente, você deve usar a tag object em vez da tag img e adicionar uma classe holderjs às tags link apropriadas. Aqui está um exemplo:
< head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object > Importante: Ao testar localmente, os URLs de fonte devem ter um protocolo http ou https definido.
IMPORTANTE: As fontes servidas em locais que não sejam registros públicos (ou seja, fontes do Google, TypeKit etc.) exigem que os cabeçalhos corretos do CORS sejam definidos. Veja como usar o CDN com webfonts para obter mais detalhes.
<object> Os espaços reservados trabalham como <img> espaços reservados, com o benefício adicional de seu DOM sendo capaz de ser inspecionado e modificado. Assim como os espaços <img> , o atributo data-src é mais confiável que o atributo data .
IMPORTANTE: As porcentagens são especificadas com o caractere p , não com o caráter % .
A especificação de uma dimensão nas porcentagens cria um espaço reservado para fluido que responde às perguntas da mídia.
< img data-src =" holder.js/100px75?theme=social " > Por padrão, o espaço reservado fluido mostrará seu tamanho atual em pixels. Para exibir as dimensões originais, ou seja, 100%x75, defina o sinalizador textmode como literal como assim: holder.js/100px75?textmode=literal .
Se você quiser evitar o suporte para o suporte de uma imagem, use a bandeira auto como assim:
< img data-src =" holder.js/200x200?auto=yes " >O acima renderizará um espaço reservado sem nenhum CSS incorporado para altura ou largura.
Para mostrar o tamanho atual de um espaço reservado de tamanho automático, defina o sinalizador textmode para exact como assim: holder.js/200x200?auto=yes&textmode=exact .
Tanto os espaços reservados fluidos quanto os espaços reservados automaticamente no modo exato são atualizados quando a janela é redimensionada. Para definir se uma imagem específica é atualizada ou não no redimensionamento da janela, você pode usar o método setResizeUpdate como assim:
var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;O acima será pausado qualquer atualização de renderização sobre a imagem especificada (que deve ser um objeto DOM).
Para ativar as atualizações novamente, execute o seguinte:
Holder . setResizeUpdate ( img , true ) ;Isso permitirá atualizações e renderizará imediatamente o espaço reservado.
O titular pode renderizar espaços reservados como imagens de fundo para elementos com a classe holderjs , como este:
# sample { background : url(?holder.js / 200 x200?theme=social) no-repeat} < div id =" sample " class =" holderjs " > </ div > O URL do suporte no CSS deve ter um ? na frente. Como nos espaços reservados para imagens, você pode especificar o URL do suporte em um atributo data-background-src :
< div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >IMPORTANTE: Certifique -se de definir uma altura e/ou largura para elementos com espaço reservado em segundo plano. Os espaços reservados de fundo fluido ainda não foram apoiados.
O titular fornece várias opções em tempo de execução que afetam o processo de geração de imagens. Estes são passados através Holder.run chamadas.
domain : o domínio a ser usado para geração de imagens. Valor padrão: holder.js .dataAttr : o atributo HTML usado para definir um retorno ao atributo src nativo. Valor padrão: data-src .renderer : o renderizador para usar. Opções disponíveis: svg , canvas . Valor padrão: svg .images : o seletor CSS usado para encontrar tags img . Valor padrão: img .objects : o seletor CSS usado para encontrar espaços reservados para object . Valor padrão: object .bgnodes : O seletor de CSS usado para encontrar elementos que possuem acionistas. Valor padrão: body .holderjs .stylenodes : O seletor de CSS usado para encontrar folhas de estilo para importar para os espaços reservados SVG. Valor padrão: head link.holderjs .noFontFallback : Não volte ao Canvas se estiver usando fontes personalizadas.noBackgroundSize : Não defina background-size para os espaços reservados em segundo plano. Você pode impedir que o titular execute sua configuração padrão executando Holder.run com suas configurações personalizadas logo após incluir holder.js . No entanto, você precisará executar Holder.run novamente para renderizar qualquer espaço reservado que use a configuração padrão.
O titular é compatível com lazyload.js e trabalha com imagens fluidas e de largura fixa. Para obter melhores resultados, execute .lazyload({skip_invisible:false}) .
Ao usar o suporte em um componente React, execute Holder.run no componentDidMount para permitir a renderização após as alterações do estado. Veja este problema para obter mais detalhes.
Você pode usar o titular em projetos Vue 2+ com vue-holderjs.
Você pode usar o titular em projetos angulares com NG-Holder ou com projetos angulares-2-Holderjs para projetos Angular 2.
Como o Meteor inclui scripts na parte superior do documento por padrão, o DOM pode não estar totalmente disponível quando o titular é chamado. Por esse motivo, coloque o código relacionado ao detentor em um ouvinte de evento "DOM Ready".
Se você estiver usando ProvidePlugin da sua configuração WebPack, configure -a da seguinte forma:
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] O titular é fornecido sob a licença do MIT.
Holder é um projeto de Ivan Malopinsky.
