كيفية عرض شاشة التحميل أثناء تحميل محتوى الموقع

StackOverflow https://stackoverflow.com/questions/244183

سؤال

أنا أعمل على موقع يحتوي على مجموعة كاملة من ملفات mp3 والصور، وأرغب في عرض صورة GIF أثناء تحميل المحتوى بالكامل.

ليس لدي أي فكرة عن كيفية تحقيق ذلك، ولكن لدي صورة GIF المتحركة التي أريد استخدامها.

أي اقتراحات؟

هل كانت مفيدة؟

المحلول

وعادة المواقع التي تفعل ذلك عن طريق تحميل المحتوى عبر اياكس والاستماع إلى الحدث readystatechanged لتحديث DOM مع GIF التحميل أو المحتوى.

وكيف حالك حاليا تحميل المحتوى الخاص بك؟

وقال إن كود تكون مشابهة لهذه: 

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

وهناك الكثير من 3rd الطرف جافا سكريبت المكتبات التي قد تجعل حياتك أسهل، ولكن ما سبق هو حقا كل ما تحتاج.

نصائح أخرى

وقال أنت كنت لا تريد أن تفعل هذا في AJAX. في حين AJAX شيء عظيم لهذا، هل هناك طريقة لاظهار DIV واحدة في حين تنتظر <body> كامل لتحميل. وغني عن شيء مثل هذا: 

<html>
  <head>
    <style media="screen" type="text/css">
      .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
      .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
    </style>
    <script>
      function downLoad(){
        if (document.all){
            document.all["layer1"].style.visibility="hidden";
            document.all["layer2"].style.visibility="visible";
        } else if (document.getElementById){
            node = document.getElementById("layer1").style.visibility='hidden';
            node = document.getElementById("layer2").style.visibility='visible';
        }
      }
    </script>
  </head>
  <body onload="downLoad()">
    <div id="layer1" class="layer1_class">
      <table width="100%">
        <tr>
          <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
        </tr>
      </table>
    </div>
    <div id="layer2" class="layer2_class">
        <script type="text/javascript">
                alert('Just holding things up here.  While you are reading this, the body of the page is not loading and the onload event is being delayed');
        </script>
        Final content.      
    </div>
  </body>
</html>

وسوف الحدث onload لا إطلاق حتى تحميل كل من الصفحة. لذلك لن يتم عرض <DIV> layer2 حتى انتهاء الصفحة من التحميل، وبعد ذلك سوف ONLOAD اطلاق النار.

ماذا عن مسج؟بسيط...

$(window).load(function() {      //Do the code in the {}s when the window has loaded 
  $("#loader").fadeOut("fast");  //Fade out the #loader div
});

و HTML...

<div id="loader"></div>

و سي اس اس ...

#loader {
      width: 100%;
      height: 100%;
      background-color: white;
      margin: 0;
}

ثم في اللودر الخاص بك div يمكنك وضع ملف GIF وأي نص تريده، وسوف يتلاشى بمجرد تحميل الصفحة.

أولا، انشاء تحميل الصور في شعبة. بعد ذلك، الحصول على عنصر div. ثم، وتحديد وظيفة أن التعديلات المغلق لجعل الرؤية إلى "الخفية". الآن، في <body>، ووضع ONLOAD إلى اسم وظيفة.

#طريقة CSS النقية

ضع هذا في أعلى الكود الخاص بك (قبل علامة الرأس)

<style> .loader {
  position: fixed;
  background-color: #FFF;
  opacity: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>
<div class="loader">
  Your Content For Load Screen
</div>

وهذا في الأسفل بعد كل التعليمات البرمجية الأخرى (باستثناء علامة /html)

<style>
.loader {
    -webkit-animation: load-out 1s;
    animation: load-out 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

@keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}
</style>

هذا يعمل دائمًا بالنسبة لي بنسبة 100٪ من الوقت

وهناك في الواقع وسيلة سهلة جدا للقيام بذلك. يجب أن يكون الرمز شيئا مثل: 

<script type="test/javascript">

    function showcontent(x){

      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 1) {
            document.getElementById('content').innerHTML = "<img src='loading.gif' />";
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('content').innerHTML = xmlhttp.responseText;
        } 
      }

      xmlhttp.open('POST', x+'.html', true);
      xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xmlhttp.send(null);

    }

وفي HTML: 

<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>

وفعلت شيئا من هذا القبيل على صفحتي ويعمل كبيرة.

ويمكنك استخدام عنصر <progress> في HTML5. انظر هذه الصفحة لشفرة المصدر وعرض حي. http://purpledesign.in/blog/super-cool-loading-bar- HTML5 /

وهنا هو العنصر التقدم ... 

<progress id="progressbar" value="20" max="100"></progress>

وهذا سيكون له قيمة تحميل بدءا من 20. وبطبيعة الحال فقط العنصر لن يكون كافيا. تحتاج إلى نقل أنها الأحمال النصي. لذلك نحن بحاجة مسج. هنا هو مسج نصي بسيط هو أن يبدأ التقدم 0-100 ويفعل شيئا في فتحة زمنية محددة. 

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

وهذا إضافة إلى ملف HTML الخاص بك. 

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

وهذا الأمل سوف اعطيكم البداية.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top