holder
1.0.0
Pemegang membuat placeholder gambar di browser menggunakan SVG.
Digunakan oleh ribuan proyek open source (termasuk bootstrap v3) dan banyak situs lainnya.
Tidak ada permintaan tambahan, ukuran bundel kecil, sangat dapat disesuaikan.
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js Termasuk holder.js di html Anda:
< script src =" holder.js " > </ script > Pemegang kemudian akan memproses semua gambar dengan atribut src tertentu, seperti ini:
< img src =" holder.js/300x200 " >Tag di atas akan membuat placeholder 300 piksel lebar dan tinggi 200 piksel.
Untuk menghindari kesalahan konsol 404, Anda dapat menggunakan data-src alih-alih src .
Untuk secara terprogram masukkan placeholder Gunakan run() API:
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; Opsi placeholder diatur melalui properti url, misalnya holder.js/300x200?x=y&a=b . Beberapa opsi dipisahkan oleh & karakter.
theme : Tema untuk digunakan untuk placeholder. Contoh: holder.js/300x200?theme=skyrandom : Gunakan tema acak. Contoh: holder.js/300x200?random=yesbg : Warna latar belakang. Contoh: holder.js/300x200?bg=2a2025fg : Warna latar depan (teks). Contoh: holder.js/300x200?fg=fffffftext : Teks khusus. Contoh: holder.js/300x200?text=Hellosize : Ukuran teks khusus. Default ke unit pt . Contoh: holder.js/300x200?size=50font : Font Teks Kustom. Contoh: holder.js/300x200?font=Helveticaalign : Alignment Teks Kustom (kiri, kanan). Contoh: holder.js/300x200?align=leftoutline : Garis besar dan diagonal untuk placeholder. Contoh: holder.js/300x200?outline=yeslineWrap : Panjang garis maksimum terhadap rasio lebar gambar. Contoh: holder.js/300x200?lineWrap=0.5Holder termasuk dukungan untuk tema, untuk membantu placeholder berbaur dengan tata letak Anda.
Ada 6 tema default: sky , vine , lava , gray , industrial , dan social .
Tema memiliki 5 properti: fg , bg , size , font dan fontweight . Properti size menentukan ukuran font minimum untuk tema. Nilai default fontweight bold . Anda dapat membuat tema sampel seperti ini:
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ; Jika Anda memiliki sekelompok placeholder di mana Anda ingin menggunakan teks tertentu, Anda dapat melakukannya dengan menambahkan properti text ke tema:
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; Ada dua cara untuk menggunakan tema khusus dengan pemegang:
Pendekatan pertama adalah yang termudah. Setelah Anda menyertakan holder.js , tambahkan tag script yang menambahkan tema yang Anda inginkan:
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script > Pendekatan kedua mengharuskan Anda run setelah Anda menambahkan tema, seperti ini:
Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; Anda dapat menggunakan pemegang di berbagai area pada gambar yang berbeda dengan tema khusus:
< 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"
} ) ; Anda dapat menambahkan placeholder secara terprogram dengan panggilan pemegang rantai:
Holder . addTheme ( "new" , {
fg : "#ccc" ,
bg : "#000" ,
size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ; Argumen pertama dalam addImage adalah atribut src , dan yang kedua adalah pemilih CSS dari elemen induk.
Holder secara otomatis menambahkan jeda baris ke teks yang keluar dari batas gambar. Jika teksnya begitu lama, ia keluar dari batas horizontal dan vertikal, teks dipindahkan ke atas. Jika Anda lebih suka mengontrol istirahat garis, Anda dapat menambahkan n ke properti text :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " > Jika Anda ingin menonaktifkan pembungkus garis, atur opsi nowrap ke true :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&nowrap=true " > Saat menggunakan opsi text , dimsion gambar tidak ditampilkan. Untuk memasukkan kembali dimensi ke dalam teks, sederhana gunakan placeholder holder_dimensions khusus.
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " > Placeholder menggunakan font khusus diberikan menggunakan kanvas secara default, karena kendala SVG pada tautan sumber daya lintas domain. Jika Anda hanya menggunakan font yang tersedia secara lokal, Anda dapat menonaktifkan perilaku ini dengan mengatur noFontFallback ke true in Holder.run opsi. Namun, jika Anda perlu membuat placeholder SVG menggunakan font yang dimuat secara eksternal, Anda harus menggunakan tag object alih -alih tag img dan menambahkan kelas holderjs ke tag link yang sesuai. Inilah contohnya:
< head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object > Penting: Saat menguji secara lokal, URL font harus memiliki protokol http atau https yang ditentukan.
Penting: Font yang dilayani dari lokasi selain pendaftar publik (yaitu Google Fonts, Typekit, dll.) Memerlukan header CORS yang benar untuk ditetapkan. Lihat Cara Menggunakan CDN dengan Webfont untuk detail lebih lanjut.
<object> Placeholder bekerja seperti <img> placeholder, dengan manfaat tambahan dari DOM mereka dapat diperiksa dan dimodifikasi. Seperti halnya placeholder <img> , atribut data-src lebih dapat diandalkan daripada atribut data .
Penting: Persentase ditentukan dengan karakter p , bukan dengan karakter % .
Menentukan dimensi dalam persentase menciptakan placeholder cairan yang menanggapi pertanyaan media.
< img data-src =" holder.js/100px75?theme=social " > Secara default, placeholder fluida akan menunjukkan ukurannya saat ini dalam piksel. Untuk menampilkan dimensi asli, yaitu 100%x75, atur flag textmode ke literal seperti So: holder.js/100px75?textmode=literal .
Jika Anda ingin menghindari pemegang yang menegakkan ukuran gambar, gunakan bendera auto seperti itu:
< img data-src =" holder.js/200x200?auto=yes " >Di atas akan membuat placeholder tanpa CSS tertanam untuk tinggi atau lebar.
Untuk menunjukkan ukuran saat ini dari placeholder berukuran otomatis, atur flag textmode ke exact seperti itu: holder.js/200x200?auto=yes&textmode=exact .
Baik placeholder cairan dan placeholder berukuran otomatis dalam mode yang tepat diperbarui ketika jendela diubah ukurannya. Untuk mengatur apakah gambar tertentu diperbarui pada ukuran jendela atau tidak, Anda dapat menggunakan metode setResizeUpdate seperti demikian:
var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;Di atas akan menjeda setiap pembaruan render pada gambar yang ditentukan (yang harus berupa objek DOM).
Untuk mengaktifkan pembaruan lagi, jalankan yang berikut:
Holder . setResizeUpdate ( img , true ) ;Ini akan memungkinkan pembaruan dan segera membuat placeholder.
Pemegang dapat membuat placeholder sebagai gambar latar belakang untuk elemen dengan kelas holderjs , seperti ini:
# sample { background : url(?holder.js / 200 x200?theme=social) no-repeat} < div id =" sample " class =" holderjs " > </ div > URL pemegang di CSS harus memiliki ? di depan. Seperti di placeholder gambar, Anda dapat menentukan URL pemegang dalam atribut data-background-src :
< div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >PENTING: Pastikan untuk menentukan tinggi dan/atau lebar untuk elemen dengan placeholder latar belakang. Placeholder latar belakang cairan belum didukung.
Holder menyediakan beberapa opsi saat runtime yang mempengaruhi proses pembuatan gambar. Ini dilewati melalui panggilan Holder.run .
domain : Domain yang akan digunakan untuk pembuatan gambar. Nilai default: holder.js .dataAttr : Atribut HTML yang digunakan untuk mendefinisikan mundur ke atribut src asli. Nilai default: data-src .renderer : Renderer untuk digunakan. Opsi Tersedia: svg , canvas . Nilai default: svg .images : Pemilih CSS yang digunakan untuk menemukan tag img . Nilai default: img .objects : Pemilih CSS yang digunakan untuk menemukan tempat penampung object . Nilai default: object .bgnodes : Pemilih CSS yang digunakan untuk menemukan elemen yang memiliki latar belakang PalceHolders. Nilai default: body .holderjs .stylenodes : Pemilih CSS yang digunakan untuk menemukan stylesheet untuk mengimpor ke placeholder SVG. Nilai default: head link.holderjs .noFontFallback : Jangan kembali ke kanvas jika menggunakan font khusus.noBackgroundSize : Jangan mengatur background-size untuk placeholder latar belakang. Anda dapat mencegah pemegang menjalankan konfigurasi default dengan mengeksekusi Holder.run dengan pengaturan khusus Anda tepat setelah memasukkan holder.js . Namun, Anda harus menjalankan Holder.run lagi untuk membuat setiap penampung yang menggunakan konfigurasi default.
Holder kompatibel dengan lazyload.js dan bekerja dengan cairan dan gambar lebar tetap. Untuk hasil terbaik, jalankan .lazyload({skip_invisible:false}) .
Saat menggunakan Holder dalam komponen React, jalankan Holder.run di componentDidMount untuk mengaktifkan rendering setelah perubahan keadaan. Lihat masalah ini untuk detail lebih lanjut.
Anda dapat menggunakan pemegang dalam proyek Vue 2+ dengan vue-holderjs.
Anda dapat menggunakan pemegang dalam proyek sudut dengan pemegang NG atau dengan sudut-2-holderjs untuk proyek 2-sangular.
Karena Meteor menyertakan skrip di bagian atas dokumen secara default, DOM mungkin tidak sepenuhnya tersedia ketika pemegang dipanggil. Karena alasan ini, kode yang terkait dengan pemegang di acara acara "Dom Ready".
Jika Anda menggunakan ProvidePlugin di konfigurasi webpack Anda, pastikan untuk mengonfigurasinya sebagai berikut:
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] Pemegang disediakan di bawah lisensi MIT.
Holder adalah proyek oleh Ivan Malopinsky.
