holder

เจ้าของ

ผู้ถือแสดงภาพตัวยึดภาพในเบราว์เซอร์โดยใช้ SVG

ใช้โดยโครงการโอเพ่นซอร์สหลายพันโครงการ (รวมถึง Bootstrap 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
• สินทรัพย์ทางรถไฟ: gem 'rails-assets-holderjs'
• Meteor: meteor add imsky:holder
• นักแต่งเพลง: php composer.phar update imsky/holder
• NUGET: Install-Package Holder.js

การใช้งาน

รวม holder.js ใน html ของคุณ:

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

ผู้ถือจะประมวลผลภาพทั้งหมดด้วยแอตทริบิวต์ src ที่เฉพาะเจาะจงเช่นภาพนี้:

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

แท็กข้างต้นจะแสดงเป็นตัวยึดตัวยึดกว้าง 300 พิกเซลและสูง 200 พิกเซล

เพื่อหลีกเลี่ยงข้อผิดพลาดของคอนโซล 404 คุณสามารถใช้ data-src แทน src

การใช้โปรแกรม

ในการแทรกตัวเลือก portherholder ใช้ 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

ธีม

ผู้ถือรวมถึงการสนับสนุนธีมเพื่อช่วยตัวยึดตำแหน่งผสมผสานกับเค้าโครงของคุณ

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

เมื่อใช้ตัวเลือก text จะไม่แสดงภาพ ในการแทรกซึมมิติลงในข้อความให้ใช้ตัวยึด holder_dimensions พิเศษ _dimensions อย่างง่าย

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

ตัวยึดตำแหน่งที่ใช้ตัวอักษรที่กำหนดเองจะถูกแสดงผลโดยใช้ผ้าใบโดยค่าเริ่มต้นเนื่องจากข้อ จำกัด ของ SVG ในการเชื่อมโยงทรัพยากรข้ามโดเมน หากคุณใช้แบบอักษรที่มีอยู่ในพื้นที่เท่านั้นคุณสามารถปิดการใช้งานพฤติกรรมนี้ได้โดยการตั้ง true noFontFallback เป็นตัวเลือก Holder.run . 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 Fonts, TypeKit ฯลฯ ) ต้องมีการตั้งส่วนหัว CORS ที่ถูกต้อง ดูวิธีการใช้ CDN กับ Webfonts สำหรับรายละเอียดเพิ่มเติม

<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 เช่นนั้น:

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

ข้างต้นจะทำให้ตัวยึดตำแหน่งโดยไม่มี CSs ที่ฝังอยู่สำหรับความสูงหรือความกว้าง

หากต้องการแสดงขนาดปัจจุบันของตัวยึดที่มีขนาดโดยอัตโนมัติให้ตั้งค่าสถานะ textmode ให้เป็น exact เช่น SO: holder.js/200x200?auto=yes&textmode=exact

ป้องกันการอัปเดตเกี่ยวกับการปรับขนาดหน้าต่าง

ทั้งตัวยึดสถานที่ของเหลวและตัวยึดที่มีขนาดโดยอัตโนมัติในโหมดที่แน่นอนจะได้รับการอัปเดตเมื่อมีการปรับขนาดหน้าต่าง ในการตั้งค่าว่ารูปภาพเฉพาะได้รับการอัปเดตในการปรับขนาดหน้าต่างหรือไม่คุณสามารถใช้วิธี 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 >

URL ของตัวยึดใน CSS ควรมี ? ด้านหน้า. เช่นเดียวกับในภาพตัวยึดภาพคุณสามารถระบุ URL ของตัวยึดในแอตทริบิวต์ data-background-src :

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

สำคัญ: ตรวจสอบให้แน่ใจว่าได้กำหนดความสูงและ/หรือความกว้างสำหรับองค์ประกอบที่มีตัวยึดพื้นหลัง ยังไม่ได้รับการสนับสนุนผู้ถือครองพื้นหลังของเหลว

การตั้งค่ารันไทม์

Holder มีตัวเลือกหลายอย่างที่รันไทม์ที่มีผลต่อกระบวนการสร้างภาพ สิ่งเหล่านี้จะถูกส่งผ่านผ่าน Holder.run เรียกใช้

• 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.run ด้วยการตั้งค่าที่กำหนดเองของคุณทันทีหลังจากรวมถึง holder.js อย่างไรก็ตามคุณจะต้องดำเนินการ Holder.run อีกครั้งเพื่อแสดงตำแหน่งผู้ถือตำแหน่งใด ๆ ที่ใช้การกำหนดค่าเริ่มต้น

ใช้กับ lazyload.js

ผู้ถือเข้ากันได้กับ lazyload.js และทำงานกับภาพของเหลวและความกว้างคงที่ เพื่อผลลัพธ์ที่ดีที่สุดรัน. .lazyload({skip_invisible:false})

ใช้กับ React

เมื่อใช้ตัวยึดในส่วนประกอบ React ให้ดำเนินการ Holder.run ใน componentDidMount เพื่อเปิดใช้งานการแสดงผลหลังจากการเปลี่ยนแปลงสถานะ ดูปัญหานี้สำหรับรายละเอียดเพิ่มเติม

ใช้กับ vue

คุณสามารถใช้ที่ถือในโครงการ Vue 2+ ด้วย Vue-holderjs

ใช้กับ angular.js

คุณสามารถใช้ที่ถือในโครงการเชิงมุมที่มี NG-holder หรือกับ Angular-2-HolderJs สำหรับโครงการ Angular 2

ใช้กับ Meteor

เนื่องจาก Meteor มีสคริปต์ที่ด้านบนของเอกสารโดยค่าเริ่มต้น DOM อาจไม่สามารถใช้งานได้อย่างสมบูรณ์เมื่อมีการเรียกผู้ถือ ด้วยเหตุผลนี้รหัสที่เกี่ยวข้องกับผู้ถือในผู้ฟังเหตุการณ์ "DOM Ready"

ใช้กับ webpack

หากคุณกำลังใช้ ProvidePlugin ในการกำหนดค่า webpack ของคุณตรวจสอบให้แน่ใจว่าได้กำหนดค่าดังนี้:

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

การสนับสนุนเบราว์เซอร์

• โครเมี่ยม
• Firefox 3+
• Safari 4+
• Internet Explorer 9+ (มีการสนับสนุนบางส่วนสำหรับ 6-8)
• โอเปร่า 12+
• Android (กับทางเลือก)

แหล่งที่มา

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

ใบอนุญาต

ผู้ถือมีให้ภายใต้ใบอนุญาต MIT

การให้เครดิต

ผู้ถือเป็นโครงการโดย Ivan Malopinsky