Używam tego Kodeksu: Jsbin; , w page.php i działa dobrze.

Jednak gdy w index.php staram się załadować page.php w div, skrypt nie powiedzie się.

Index.php:

$('#myDiv').load('page.php');
.one {
  width:500px;
  height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" class="one"></div>

Importowałem biblioteki, próbowałem uruchomić skrypt w index.php i inne rzeczy bez wyniku. Gdzie zawodzę?

2
Gp90 28 październik 2020, 15:39

1 odpowiedź

Najlepsza odpowiedź

Naprawiłem twój problem według:

  1. Rewidowanie JavaScript "JSBIN" do następujących

  function id(v){return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0;
        tot = img.length;

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }


setTimeout(function(){ loadbar(); }, 3000);

A po drugie, zmieniłem plik indeksu do:

<style>
.one {
  width:500px;
  height:400px;
}
</style>


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
   $('#content').load("test1.html");
 
   
});
</script>
</head>
<body>

<div id="content" class="one"></div>

</body>
</html>



Właściwie możesz tutaj zobaczyć przykład:

http://www.createchhk.com/20201028/test2.html (Twój indeks , zmodyfikowany jak powyżej)

http://www.createchhk.com/20201028/test1.html (Twój JSBIN , zmodyfikowany jak powyżej)

Powodem jest:

  1. Document.Addeventlistener ("Domcontentloaded", Loadbar, False), który znajduje się w oryginalnych kategoriach JSbin, zostanie uruchomiony natychmiast na pagelead. Ale twój indeks nie będzie miał możliwości wywoływania tego funkcji "Loadbar" na ładowaniu, ponieważ jQuery będzie potrzebować czasu, aby załadować JSBIN do indeksu

  2. Dodałem opóźnienie (Thru Settimeout) w przeciwnym razie ładowarka zniknie zbyt wcześnie --- przed załadowaniem i wyświetlaniem rzeczywistej strony.

1
Ken Lee 28 październik 2020, 14:58