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 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 .

استخدام البرنامج

لإدراج برنامجياً ، استخدم حامل نائب واجهة برمجة تطبيقات run() :

 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

موضوعات

يتضمن Holder دعمًا للمواضيع ، لمساعدة العناصر النائبة على الاندماج مع تخطيطك.

هناك 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 للعنصر الأصل.

نص

يضيف Holder فواصل الخط تلقائيًا إلى نص يخرج خارج حدود الصورة. إذا كان النص طويلًا جدًا ، فسيخرج من كل من الحدود الأفقية والرأسية ، يتم نقل النص إلى الأعلى. إذا كنت تفضل التحكم في فواصل الخط ، فيمكنك إضافة 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 ، لا يتم عرض dimesions الصورة. لإعادة إدخال البعد في النص ، استخدم Simple holder_dimensions العنصر النائب.

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

يتم تقديم العناصر النائبة التي تستخدم خطًا مخصصًا باستخدام قماش افتراضيًا ، بسبب قيود 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 مع 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 مثل: 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 المكالمات.

• 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

يتوافق Holder مع lazyload.js ويعمل مع كل من الصور السوائل والعرض الثابت. للحصول على أفضل النتائج ، Run .lazyload({skip_invisible:false}) .

باستخدام رد فعل

عند استخدام Holder في مكون React ، قم بتنفيذ Holder.run في componentDidMount لتمكين التقديم بعد تغييرات الحالة. انظر هذه المشكلة لمزيد من التفاصيل.

باستخدام مع Vue

يمكنك استخدام Holder في مشاريع Vue 2+ مع Vue-HolderJs.

باستخدام angular.js

يمكنك استخدام حامل في المشاريع الزاوية مع حامل NG أو مع angular-2-holderjs لمشاريع Angular 2.

باستخدام مع النيزك

نظرًا لأن Meteor يتضمن البرامج النصية في الجزء العلوي من المستند بشكل افتراضي ، فقد لا يكون DOM متاحًا تمامًا عند استدعاء Holder. لهذا السبب ، فإن الكود المتعلق بحامل المكان في مستمع حدث "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

رخصة

يتم توفير حامل تحت رخصة معهد ماساتشوستس للتكنولوجيا.

الاعتمادات

Holder هو مشروع من قبل إيفان مالوبينسكي.