मैं पूरे पृष्ठ को लोड किए बिना व्यक्तिगत डिव को कैसे लोड करूं और लोडिंग स्थिति कैसे दिखाऊं?

मैं यह करता हूं:

सबसे पहले आपके पास एक लोडिंग के साथ छिपा हुआ div है यदि इसमें और एक लोड बटन है:

<div id="displayDiv" style="display: none">
  <img id="loadingGif" src="loadingGif" style="display:none"; />
  <div id="actualContent" style="display:none" />
</div>
<input type="button" id="loadButton" />

फिर आपके पास जेएस कोड है (मैं jQuery का उपयोग करता हूं)

<script type="text/javascript">
   $(document).ready( onDocumentReady); // this runs before page load

   function onDocumentReady()
   {
      $('#loadButton').click( onLoadClick ); //assign action on button click
   }   

   function onLoadClick()
   {
       $('#loadingGif').show(); // show the loading gif. It won't show as long as it's parent is hidden
       $('#actualContent').hide(); // hide the actual content of the response;
       $('#displayDiv').show(); // display the div
       $.get("test.php", onRequestComplete ); // make the ajax request to the stand alone PHP file
      //so as long as the content loads, the loading gif will show;
   }

   function onRequestComplete( data )
   {
      $('#loadingGif').hide();
      $('#actualContent').html( data );
      $('#actualContent').show();
   }
</script>

इसलिए। आपके पास एक कंटेनर "डिस्प्लेडिव" है; आपके अंदर एक छवि "लोडिंगजीआईएफ" और दूसरा कंटेनर "वास्तविक सामग्री" है; जब आप लोड बटन पर क्लिक करते हैं, तो लोडिंग gif वाला बड़ा कंटेनर प्रकट होता है, जो उपयोगकर्ता को सूचित करता है कि कुछ लोड हो रहा है। जब सामग्री लोड हो जाती है, तो आप केवल लोडिंग जीआईएफ को छुपाते हैं, और जानकारी को "वास्तविक सामग्री" gif में प्रदर्शित करते हैं। Test.php में आप केवल वही प्रतिध्वनित करते हैं जो div में प्रकट होना चाहिए। मैं JSON का उपयोग करने की सलाह देता हूं, लेकिन आप इसके बारे में और अधिक पढ़ेंगे।

आशा है कि यह मदद करता है।