less.js आलसी शीट लोड

मुझे आश्चर्य है कि पृष्ठ लोड के बाद कभी भी less शीट लोड करने का कोई तरीका है या नहीं। This question का एक उत्तर है जो बताता है कि सभी चादरें कैसे पुनः लोड करें, लेकिन मेरे उपयोग-मामले के लिए मौजूदा चादरों में नई लोड की गई चादरों पर निर्भरता नहीं होती है, और शीट को आलसी जोड़ना अच्छा होगा। मैं कुछ सोच रहा हूं जैसेless.js आलसी शीट लोड

less.sheets.push(mySheet); 
less.loadStyleSheet(mySheet);

संभावित API का प्रतिनिधित्व कर सकता है? चीयर्स,

कॉलिन

अद्यतन 3rd दिसंबर 2010:

मैं less.js codebase की लिविंगस्टन शमूएल की ठीक बाहर की कोशिश की है, और जब तक यह काम करता है, उस में परिभाषाओं पहचान करने के लिए प्रकट नहीं होता है पहले ही स्टाइलशीट लोड हो चुकी है। यहां मेरी नमूना फाइलें हैं

ए। index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Simple</title> 

    <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/> 
    <script src="/static/js/less-1.0.40.js"></script> 
</head> 
<body> 
    <div id="container"> 
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    </div> 
    <div id="abc"><div>Bingo</div></div> 
</body> 

<script> 
console.log("loading new sheet"); 
less.loadStyleSheet("/static/less/style2.less", function() { 
    console.log("Loaded!"); 
}); 

console.log("called"); 

</script> 
</html>

ज। style.less

@primary_color: green; 

.rounded(@radius: 5px) { 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 

#container { 
    background: @primary_color; 
    .rounded(5px); 

    div { 
    color: red; 
    } 
}

सी। style2.less

#abc { 
    background: @primary_color; 
    .rounded(10px); 

    div { 
    margin: 2px; 
    color: blue; 
    } 
}

तो दूसरा स्टाइलशीट lazily लोड करता है, लेकिन यह style2.less में निम्नलिखित पार्स करने में त्रुटि

है

.rounded परिभाषित किया गया है style.less ".rounded अपरिभाषित है" , और चूंकि मैंने उस शीट को उतार नहीं दिया है, इसलिए मैं सोच रहा था कि यह वर्तमान वातावरण में कंपाइलर के लिए अभी भी उपलब्ध होना चाहिए।

इसे एक और तरीका रखने के लिए, हम ताजा शुरू नहीं करना चाहते हैं, या मौजूदा परिभाषाओं को उतारना नहीं चाहते हैं, लेकिन पहले से लोड की गई शैलियों पर निर्माण करना चाहते हैं। धन्यवाद,

कॉलिन

स्रोत

2010-07-08 hawkett

दूसरों के संदर्भ के लिए: कम = http://lesscss.org/ – Orbling

-2

तुम सब डोम के लिए एक नई स्क्रिप्ट टैग को जोड़ने है क्या करना है। फिर इसे डाउनलोड और निष्पादित किया जाएगा।

function addScript (id, url) // Adds scripts to the DOM 
{ 
    var s = document.createElement('script'); 
    s.id = id; 
    if (url) s.src=url; 
    s.type='text/javascript'; 

    document.getElementsByTagName('head')[0].appendChild(s) 
    return s; 
}

यह मैं अपनी साइट पर उपयोग करता हूं लेकिन मैं इसे पार्स पर कॉल करता हूं। आपके लिए इसे आलसी लोडर के रूप में उपयोग करने के लिए इसे onload या इसी तरह से कॉल करने के लिए ठीक काम करना चाहिए।

स्रोत

2010-11-26 02:22:13 Youarefunny

क्षमा करें, मैंने सोचा था कि आपने अपनी जावास्क्रिप्ट फ़ाइल नामित किया था :( – Youarefunny

मुझे वह नहीं मिलता है जो आप करना चाहते हैं? क्या आप चाहते हैं पेज लोड के बाद डीओएम में स्टाइलशीट (इसे कम.जेएस स्टाइलशीट) जोड़ें? – Youarefunny

1. पेज लोड पूर्ण, 2. उपयोगकर्ता कुछ सामान करता है, और भविष्य में किसी बिंदु पर एक लिंक पर क्लिक करता है जिसके लिए एक नई स्टाइलशीट की आवश्यकता होती है लोड किया गया। एक अच्छा उदाहरण ui विजेट घटक की स्थापना हो सकती है।हम पूरे पेज को पुनः लोड नहीं करना चाहते हैं, बस विजेट के लिए आवश्यक एचटीएमएल और सीएसएस। – hawkett

less.js में इसके स्थानीय दायरे में loadStyleSheet फ़ंक्शन है जिसका उपयोग गतिशील रूप से कम शैलियों (आलसी लोड) को लोड और पार्स करने के लिए किया जा सकता है।

एकमात्र समस्या यह है कि फ़ंक्शन less.js को परिभाषित करने के लिए बनाए गए बंद में है, इसलिए आप अपने कोड से फ़ंक्शन तक नहीं पहुंच सकते हैं।

शायद यह एपीआई विस्तार से उजागर किया जा सकता है।

अद्यतन:

मैं @https://github.com/livingston/less.js

less.js की एक काँटेदार संस्करण बना लिया है आप विधि less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

मैं भी एक कर दिया है का उपयोग कर किसी भी स्टाइलशीट लोड कर सकते हैं इस संस्करण का उपयोग करना वास्तविक पुस्तकालय के लिए अनुरोध खींचें, उम्मीद है कि वे मेरे परिवर्तन स्वीकार करते हैं।

स्रोत

2010-12-02 12:26:09

मैंने इसका परीक्षण किया है, और यह काम करने के लिए देखता है, लेकिन पहले से लोड स्टाइलशीट में परिभाषाएं अपरिचित हैं। अधिक विस्तार से प्रश्न अपडेट करेंगे। चीयर्स। – hawkett

वैकल्पिक रूप से आप कुछ सर्वर-साइड कोड लिख सकते हैं जो आपकी बेकार स्टाइलशीट को फ्लाई पर .css में परिवर्तित कर देगा। क्लाइंट से आप इसे आलसी लोड करेंगे जैसे कि यह कोई अन्य .css स्टाइलशीट था। यह दृष्टिकोण http://www.dotlesscss.org/ द्वारा उपयोग किया जाता है हालांकि इसका उपयोग किसी भी स्वाद के बिना किया जा सकता है।

शायद आप जो खोज रहे हैं उसे नहीं, लेकिन यह मेरे लिए कुछ विकल्प है।

स्रोत

2010-12-05 21:14:11

हाँ डीफ़। एक विकल्प - मेरा ऐप ऐप इंजन (पायथन) पर है, और स्टाइल स्क्रिप्ट्स उपयोगकर्ता रनटाइम पर योगदान देती हैं - इसलिए सर्वर साइड संकलन के लिए मेरे एकमात्र विकल्प हैं (ए) एक पायथन लाइब्रेरी (मुझे कुछ भी नहीं मिला जो अच्छी तरह से बनाए रखा लगता है, वर्तमान, या कम प्रगति का पालन करने की संभावना विश्वसनीय रूप से)। (बी) एक बाहरी वेब सेवा जो स्रोत स्क्रिप्ट स्वीकार करती है और संकलित आउटपुट देता है। (सी) कम से कम कुछ चुनें जिसमें पाइथन कंपाइलर है। इनमें से कोई भी विकल्प बहुत आकर्षक नहीं है, और आसानी से कम.जेएस इन मुद्दों को हल करता है (यदि यह आलसी लोड हो सकता है) बहुत आकर्षक है। धन्यवाद। – hawkett

दूसरी बात यह है कि मुझे आलसी लोडिंग की आवश्यकता है, मुझे भागों को अलग-अलग उपलब्ध/संकलित करने की आवश्यकता है - उदा। उपयोगकर्ता ए केवल स्क्रिप्ट 1 का उपयोग कर सकता है, जबकि उपयोगकर्ता बी स्क्रिप्ट 1 और स्क्रिप्ट 2 दोनों का उपयोग कर सकता है (स्क्रिप्ट 2 का उपयोग स्वयं नहीं किया जा सकता है, क्योंकि यह स्क्रिप्ट 1 पर निर्भर करता है, लेकिन स्क्रिप्ट 2 का उपयोग सभी द्वारा नहीं किया जा सकता है)। तो जब स्क्रिप्ट 2 लोड होता है, अगर इसे सर्वर पर प्रीकंपल किया गया है, तो सीएसएस फ़ाइल में पहले से लोड की गई स्क्रिप्ट 1 में सभी परिभाषाएं होंगी। सच है कि वे सिर्फ ओवरराइड करेंगे, लेकिन अनावश्यक रूप से बड़ी सीएसएस फाइलें और सामान्य रूप से बहुत खराब बदबू आती हैं। – hawkett

मैं उपरोक्त स्पष्टीकरण के साथ इसे समझने में सक्षम नहीं था इसलिए मैं अपना खुद का प्रदान करूंगा।

तो पहले। पृष्ठ लोड होने के बाद अपनी कम स्टाइलशीट में लोड करें। कुछ ऐसा:

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

ग्रेट। अब अपनी स्टाइलशीट का चयन करें और इसे चादरों के संग्रह में दबाएं जो कम से कम है। यह एक डीओएम ऑब्जेक्ट की उम्मीद कर रहा है इसलिए मैंने एक jQuery चयनकर्ता का उपयोग किया।

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

अगर कोई ऐसा करने का बेहतर तरीका जानता है तो कृपया मुझे शिक्षित करें। (मुझे इसे सही करने के लिए [0] जोड़ना पड़ा था।) यदि आप इसे कंसोल में करते हैं तो यह एक नंबर लौटाएगा। वह संख्या यह है कि कितनी चादरें कम जानती हैं, इसलिए उम्मीद है कि यह एक नंबर अधिक हो गया है, जो आपके पास पहले से ही पृष्ठ लोड पर था।

अगला भाग आसान है। आप Less.js को अपनी सभी कम गुड शीट्स को पुनः लोड करने के लिए कहते हैं, इसमें वह शीट शामिल है जिसे आपने अभी अपने ढेर में जोड़ा है।

less.refresh();

और वहां आप जाते हैं। उसने केवल स्टाइलशीट को गतिशील रूप से लोड किया होगा और उसे संकलित करने के लिए कम बताया होगा। उम्मीद है की यह मदद करेगा।

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) { 
    var $sheet = $('<link />', { 
     href: fileName, 
     rel: 'stylesheet/less', 
     type: 'text/css' 
    }).appendTo('head'); 
    less.sheets.push($sheet[0]); 
}); 
less.refresh();

स्रोत

2012-03-09 17:46:05 MSaforrian

बस मेरी अपनी जरूरतों के लिए MatthewForr जवाब अपनाया।

lazy.load('/static/less/style.less');

यह भी एक कॉलबैक प्राप्त कर सकते हैं निर्भरता के साथ कुछ अधिक संपत्ति लोड और कैश के बारे में ख्याल रखता है:

इस के रूप में सरल है।

स्रोत

2012-11-15 18:07:39 sunrize531

आप lazy load less/css and js files को यह हल्के पुस्तकालय का उपयोग कर सकते (अस्वीकरण: मैं लेखक हूँ)

स्रोत

2014-07-06 10:17:11

less.js आलसी शीट लोड

उत्तर

संबंधित मुद्दे