Javascript：如何在創建圖表時顯示動畫（加載的）gif

Question

在網頁上，我有一些使用pChart創建的圖表，它們需要一些時間才能生成。

為了使頁面在合理的時間內完成加載，我放置了一些圖片（也使用pChart生成）來代替這些圖表，這些圖片僅帶有文字“單擊此處以加載圖表XYZ”。

我的問題是，當用戶單擊圖片時，div縮小為零，這會導致其他div改變位置。 因此，我正在考慮在生成圖表時代替圖表顯示加載的（動畫）gif。 單擊后，這還應提供直觀的指示，表明正在生成圖表，並防止div縮小。

這是到目前為止我正在使用的代碼：

<head>
<script>
   function myFunction(where){
      var content = '<img style="some style" src="chart.php">';
      document.getElementById(where).innerHTML = content;
   }
</script>
</head>
<body>
<div id="id1" style="some style">
     <img style="some style" src="click-to-load.php" onclick="myFunction('id1')">
</div>
</body>

上面的工作就像我已經描述的那樣：div縮小並且用戶沒有任何其他視覺指示，表明在后台發生了某些事情，並且最終會由於單擊而顯示出一些東西。

因此，如何更改onclick事件以顯示gif，請求php圖表（這只是一個jpeg圖像），以及在准備好dsplay時將其顯示在加載的gif上？

Answer 1

一方面，為了避免縮小的問題，您可以在<div id="id1"></div上設置寬度和高度，以便即使室內沒有東西也可以保留此空間。 頁面中的其余元素將保留在原處。

另一方面，當您單擊初始圖像時，您希望發生兩件事：1）將此圖像交換為gif，2）並執行將加載某些內容的php文件。

您只需要使用想要顯示的gif設置var content ，這將立即發生，並執行php文件，這將需要一段時間，然后將gif替換為其內容。

~~順便說一句， src屬性應該具有圖像的路徑。~~

Javascript：如何在創建圖表時顯示動畫（加載的）gif

問題描述

1 個解決方案

解決方案1
0 2017-11-29 10:23:22

Javascript：如何在創建圖表時顯示動畫（加載的）gif

問題描述

1 個解決方案

解決方案1 0 2017-11-29 10:23:22

解決方案1
0 2017-11-29 10:23:22