क्या AJAX/jquery तकनीक के साथ पृष्ठ सामग्री को प्रीलोड करना संभव है?

क्या सभी पृष्ठ सामग्रियों को लोड करना संभव है (जैसे लोडिंग बार/एनिमेटेड gif .. या लोडिंग टेक्स्ट ..) जब तक सामग्री पूरी तरह से लोड नहीं हो जाती है और फिर उपयोगकर्ता/विज़िटर को प्रदर्शित की जाती है? यदि यह संभव है, तो क्या आप इसे प्राप्त करने के लिए मुझे केवल दिशा-निर्देश या संसाधन दे सकते हैं। क्योंकि मैं आसानी से छवि प्रीलोडर ढूंढने में सक्षम था, लेकिन मैं एक प्रीलोडिंग तकनीक की तलाश में हूं जो प्रदर्शित होने से पहले पेज पर सभी सामग्री को प्रीलोड करेगा।क्या AJAX/jquery तकनीक के साथ पृष्ठ सामग्री को प्रीलोड करना संभव है?

स्रोत

2009-04-08 Ahmad Fouad

इसके लिए अजाक्स का उपयोग करने की आवश्यकता नहीं है। बस पृष्ठ के रैपर div display से none पर सेट करें। फिर इसे block पर बदलें जब दस्तावेज़ लोड हो गया है।

आपका कोड इस प्रकार दिखाई देंगे, वेनिला जावास्क्रिप्ट का उपयोग करते हुए:

<script type="text/javascript"> 
    function preloader() { 
     document.getElementById("preloader").style.display = "none"; 
     document.getElementById("container").style.display = "block"; 
    } 

    window.onload = preloader; 
</script> 

<style> 
div#wrapper { 
    display: none; 
} 

div#preloader {    
    top: 0; right: 10px; 
    position:absolute; 
    z-index:1000; 
    width: 132px; height: 38px; 
    background: url(path/to/preloaderBg.png) no-repeat; 
    cursor: wait; 
    text-shadow: 0px 1px 0px #fefefe; //webkit     
} 
</style> 

<body> 
    <div id="preloader">Loading... Please Wait.</div> 
    <div id="wrapper"> 
     <!-- page contents goes here --> 
    </div> 
</body>

अद्यतन, jQuery में:

<script type="text/javascript"> 
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc. 
    $(document).ready(function(){ 
     $("#preloader").hide(); 
     $("#container").show(); 
    }); 
</script>

संबंधित दस्तावेज: घटनाक्रम/ready, घटनाक्रम/load, सीएसएस/css & कोर/$

स्रोत

2009-04-08 03:06:27 sepehr

div [id = "एक्स"]? निश्चित रूप से बस #x? – bobince

यह चाल है। और यह आसान है। यदि आपके पास समय है, तो कृपया एक jQuery संस्करण लिखें; हालांकि यह अच्छी तरह से काम करता है। –

@bobince वही वही! तो क्यों? StackOverflow कोड ब्लॉक में टिप्पणी के रूप में पिछले # वर्णों के साथ बयान मानता है। बस उस #x का उपयोग करें। – sepehr

मैंने ऐसा कुछ किया जहां मुझे पता था कि जब कोई छवि पूरी तरह से लोड हो गई थी, तो मैंने $.get() फ़ंक्शन के साथ प्रीलोडिंग किया और अंतिम पैरामीटर के रूप में कॉलबैक फ़ंक्शन पारित किया। इस तरह, जब छवि वास्तव में डाउनलोड की गई थी, तो मेरी कॉलबैक आग लग जाएगी और मुझे पता चलेगा कि ब्राउज़र में पहले से ही कैश में छवि थी।

आप एक ऐसा फ़ंक्शन लिख सकते हैं जो प्रत्येक छवि के लिए वैश्विक चर को बढ़ाएगा जिसे आप प्रीलोड करने के लिए कहते हैं, और फिर आपका कॉलबैक काउंटर को कम कर सकता है। जब काउंटर शून्य पर वापस आ जाता है, तो दूसरा फ़ंक्शन कॉल करें। एक बार सभी छवियों को पहले से लोड करने के बाद यह फ़ंक्शन आग लग जाएगा।

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

स्रोत

2009-04-08 02:24:41 Rich

यदि आप एक विधि चुनते हैं जहां सामग्री पूरी तरह से लोड होने तक सामग्री छिपी हुई है, तो इसे प्रारंभ में सीएसएस में छुपाया नहीं गया है, फिर जावास्क्रिप्ट में छोड़ा गया है। यदि आप ऐसा करते हैं, तो जावास्क्रिप्ट अक्षम या अनुपलब्ध वाले किसी भी व्यक्ति को कोई पृष्ठ नहीं मिलेगा। इसके बजाय, दोनों छुपाएं और स्क्रिप्ट से दिखाएं।

<body> 
    <script type="text/javascript"> 
     document.body.style.visibility= 'hidden'; 
     window.onload= function() { document.body.style.visibility= 'visible'; }; 
    </script>

यह भी ध्यान दें कि 'प्रीलोडर' शब्द वास्तव में आप जो कर रहे हैं उसके लिए सही नहीं है। 'प्री' का तात्पर्य है कि आप पृष्ठ को लाने और कैश करके प्रदर्शन बढ़ा रहे हैं ताकि यह आवश्यक समय तक जाने के लिए तैयार हो।

लेकिन असल में यह विपरीत है: प्रदर्शन को कम करता है, जब उपयोगकर्ता आंशिक सामग्री उपलब्ध होता है, तो उपयोगकर्ता लोड होने के दौरान उपयोगकर्ता को कुछ भी नहीं दिखाता है। प्रगतिशील प्रतिपादन को हराकर धीरे-धीरे ब्राउजिंग धीमा हो जाता है। यह आम तौर पर गलत बात है, और सामान्य ब्राउज़र प्रगतिशील प्रतिपादन के साथ जाने वाले कुछ विशिष्ट मामलों को छोड़कर सबसे अच्छा है। इस तरह वेब काम करता है; लोगों द्वारा अब तक इसका उपयोग किया जाता है।

(लोग, कि मंद बुद्धि प्रबंधन प्रकार जो वास्तव में उपयोग नहीं करते या वेब लेकिन मांग समझते हैं कि उनकी कंपनी की साइट सभी को एक बार दिखाई देता है की तरह के अलावा, है।)

स्रोत

2009-04-08 09:28:08 bobince

तुम कर सकते हो आसानी से jquery के साथ।

स्क्रिप्ट


$(window).load(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

शैलियों


div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

एचटीएमएल

 
div id="preloader"

स्रोत

2010-11-15 08:14:56

सबसे अच्छा तरीका है

 
function ajax(){ 
$('#wapal').html('path to image'); 
$.ajax({ 
     url:'somfile.php', 
     method:'get', 
     success:function(data){ 
     if(data =='') return; 
     $('#wapal').html(data); 
     } 
    }); 
}

स्रोत

2011-01-13 12:43:05

डीएमयूएस-जेराड उत्तर में कुछ संशोधन क्योंकि यह पृष्ठ पर ऐडसेंस होने पर काम नहीं करता है।

आप इसे आसानी से jquery के साथ कर सकते हैं।

स्क्रिप्ट

$(document).ready(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

शैलियों

div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

एचटीएमएल

div id="preloader"

स्रोत

2012-06-23 13:23:07 tamal3053

क्या AJAX/jquery तकनीक के साथ पृष्ठ सामग्री को प्रीलोड करना संभव है?

उत्तर

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