2012-12-03 13 views
8

मैं वेबसाइट पृष्ठों को एक दूसरे से चिकनाई करना चाहता हूं। तो मैंने $ ('ए') बनाया है। क्लिक करें(); फ़ंक्शन जो जांचता है कि लिंक स्थानीय है, और यदि यह एक लिंक href प्राप्त करता है और इसे शरीर में लोड करता है।jQuery .load() सामग्री लोड होने तक प्रतीक्षा करें

$('a').click(function(){ 
    var href=$(this).attr('href'); 
    $('body').load(href); 
    return false; 
}); 

यह अच्छा लग रहा है, लेकिन मेरी साइट में भी बहुत सारे जेएस प्लगइन्स शामिल हैं। उन्हें निष्पादित करने में कुछ समय लगता है, और .load क्रिया पहले 'जेएस' सामग्री द्वारा अपरिवर्तित दिखाती है, और उसके बाद जेएस का पता लगाती है। यह सामग्री के खराब झिलमिलाहट का कारण बनता है।

क्या जेएस के सभी निष्कर्षों के साथ नई सामग्री को कैश करना संभव है, पुराने शरीर को तब तक नहीं बदलना चाहिए जब तक कि यह पूरा नहीं हो जाता है, और जब सभी डीओएम और जेएस नई सामग्री पर किया जाता है, तो स्लाइड पुरानी सामग्री और स्लाइड नई में?

संपादित करें: मुझे लगता है कि बिंदु जेएस निष्पादन का पता लगाने के बारे में नहीं है, लेकिन यह जांचने के बारे में कि क्या सभी अतिरिक्त फाइलें लोड की गई हैं - डीओएम बदलना उसी समय निकाल दिया जाना चाहिए जब $ (विंडो)। नई फाइल का लोड होगा।

[संपादित करें] ------------------------------------------ ----------------------------

इसके लिए मेरा समाधान सीएसएस कोड था (सीएसएस को बनाया गया है इससे पहले सीएसएस लोड हो जाता है) जिसमें क्रॉस-ब्राउज़र अस्पष्टता 0 है।

.transparent{ 
    -moz-opacity: 0.00; 
    opacity: 0.00; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
    filter:alpha(opacity=0); 
} 

और यह आमतौर पर सामग्री के खराब फ़्लिकर से नहीं बल्कि हमेशा नहीं रहता है। अब किसी भी तरह से यह पता लगाना संभव है कि सामग्री jQuery AJAX द्वारा लोड की गई है और कुछ शो टाइमआउट लागू करें। लेकिन वास्तव में सवाल अभी भी खुला है। ।

अब उस सवाल के लिए थोड़ा और अधिक सरल उदाहरण के लिए: उस लिंक पर क्लिक करने के बाद

कैसे ('शरीर') $ के बाद डोम को बदलने शुरू करने के लिए लोड ('something.php') 3000ms आग .load ('something.php') फ़ंक्शन? (लोड करने के तुरंत बाद लोडिंग शुरू होनी चाहिए, लेकिन बाद में डीओएम बदलना शुरू किया जाना चाहिए)

+0

लोड एक कॉलबैक कि पूरा करने के लिए ajax अनुरोध के लिए इंतजार कर रहा है है, तो आप उपयोग कर सकते हैं, और यह [** डॉक्स में सब है ** ] (http://api.jquery.com/load/), यदि आपके प्लगइन में समान कॉलबैक हैं, तो आप उन लोगों का भी उपयोग कर सकते हैं, अन्यथा टाइमआउट शायद सबसे आसान समाधान है। – adeneo

उत्तर

0

.लोड फ़ंक्शन एक दूसरा पैरामीटर प्रदान करता है, जो ऑपरेशन पूर्ण होने पर कॉल करने के लिए एक फ़ंक्शन होता है। आप इसे अपने सभी परिचालनों को सिंक्रनाइज़ करने के लिए, अनिवार्य रूप से, या अजाक्स कॉल को पूरा करने के लिए प्रतीक्षा कर सकते हैं, इसका उपयोग कर सकते हैं। कुछ इस तरह:

$("body").load(href, function(responseData){ 
    // whatever you need to do when the ajax call is complete 
}) 

संपादित करें: के रूप में, adeneo टिप्पणी में कहा, the documentation की जाँच करें।

+0

मुझे पता है। मुझे जो काम करने की ज़रूरत है वह है jQuery को बताने के लिए - डॉट फू ** आईएनजी वास्तविक सामग्री स्पर्श करें इससे पहले कि आप कॉल पूरा करें! तो पूर्ण कॉलबैक मुझे बिल्कुल मदद नहीं करते हैं। – user1785870

+0

@ user1785870 मैं वास्तव में बिल्कुल समझ में नहीं आता। क्या आप कह रहे हैं कि आप .load फ़ंक्शन को तब तक कुछ करने से रोकना चाहते हैं जब तक कि सभी पृष्ठ सामग्री लोड नहीं हो जाती है, या ऐसा कुछ? दूसरे शब्दों में, पृष्ठ लोड होता है, लेकिन जब तक सब कुछ लोड हो रहा है और निष्पादित नहीं हो जाता है, तब तक लिंक कुछ भी नहीं करता है, जिसके बाद उपयोगकर्ता को लिंक पर क्लिक करने की अनुमति है? –

+1

कल्पना करें कि आपको अपने पृष्ठ पर एक लिंक मिला है जो $ ('body') होगा। लोड ('something.php'); मैं कुछ भी नहीं करना चाहता जब आप लिंक पर क्लिक करते हैं जब तक कि कुछ चीज़ों से सामग्री पूरी तरह से लोड नहीं हो जाती। अगर something.php में बहुत सारी बड़ी छवियां हैं, तो थोड़ी देर के लिए क्लिक करने के बाद कुछ भी नहीं होगा। – user1785870

0

एक बात में मदद कर सकता है कि एक उपयोगकर्ता-निर्धारित प्रकार के साथ कुछ स्क्रिप्ट टैग के अंदर अपने html डाल करने के लिए है (या स्क्रिप्ट टैग के अंदर अपने html लोड करने के लिए)

इस तरह:

<script type="text/template" id="myTemplate"> 
    <div>some html</div> 
</script> 

एचटीएमएल कोड के अंदर Dom द्वारा समझा नहीं की जाएगी जब तक आप इसे पेज

//... at some point 
var tmp = $('#myTemplate').html(); 
$(body).append(tmp); 

Ajos को संलग्न!

0

.load() का उपयोग न करें। वह विधि विशेष रूप से आप जो बचने की कोशिश कर रहे हैं वह करता है।

यह करके देखें: साथ $ .Get, $ .post, $ .ajax या जो कुछ भी विधि उपयुक्त है आप

  1. लोड। इस तरह, आपको HTML स्ट्रिंग के रूप में स्क्रिप्ट के साथ HTML कोड मिलता है।
  2. सामग्री को रखने के लिए एक छिपी हुई div, या पारदर्शी div, या कोई अन्य तत्व बनाएं। यहां यह सुनिश्चित करना है कि स्क्रिप्ट निष्पादित होने तक यह div प्रदर्शित नहीं होता है। ऐसा करने के लिए, एकमात्र तरीका यह है कि आप जिस पृष्ठ को लोड करना चाहते हैं, उसमें एक अंतिम स्क्रिप्ट जोड़ना है, जो पुराने सामग्री को हटा देता है और नया दिखाता है। आखिरी लिपि होने के नाते, यह तब तक निष्पादित नहीं होगा जब तक कि अन्य लोग ऐसा नहीं करते हैं, इसलिए आपका डोम तैयार होना चाहिए।

बेशक, यदि आपकी स्क्रिप्ट $ (दस्तावेज़) .ready() जैसी कुछ पर भरोसा करती है, तो यह काम नहीं करेगी, क्योंकि यह तुरंत निष्पादित होगी। छवियों में एक ही समस्या है। वे अतुल्यकालिक रूप से लोड होते हैं, इसलिए आपको पता नहीं चलेगा कि उनमें से सभी लोड हो गए हैं, सिवाय इसके कि यदि आप प्रत्येक छवि के अधिभार ईवेंट में एक हैंडलर संलग्न करते हैं, जो कि एक अच्छा विचार नहीं है।

1

शायद तुम वादों का उपयोग करें और कुछ इस तरह की कोशिश करनी चाहिए:

$('a').click(function(){ 
    var href=$(this).attr('href'); 
    $('body').hide(); 
    $('body').load(href, function() { 
     $('body').show(); 
    }); 
}); 
संबंधित मुद्दे